Обводка блока css: border-width — CSS | MDN — Вебджем.рф | Создание и продвижение сайтов

Содержание

border-bottom | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Зависит от использования
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Синтаксис

border-bottom: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom</title>
  <style>
   .panel {
    background: #ccc; /* Цвет фона */
   } 
   .panel P.content {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    border-top: 2px dotted white; /* Параметры линии вверху */
   }
   .panel P.title {
    font-family: sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    background: maroon; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom: 2px solid white; /* Параметры линии внизу */
   }
  </style>
 </head>
 <body> 
  <div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
     aliguam erat volutpat.  </p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom

Объектная модель

[window.]document.getElementById(«elementID»).style.borderBottom

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Границы

CSS по теме

border-bottom

Статьи по теме

Колонки таблицы
Простая таблица
Строки таблицы
Таблица без рамки
Таблица с рамкой

Рецепты CSS

Как добавить линию возле текста?
Как добавить подчеркивание к заголовку?
Как добавить пунктирное подчеркивание к ссылкам?
Как сделать пунктирное подчеркивание текста?

html — Как сделать обводку в 1 px у блоков?

Задать вопрос

Вопрос задан 4 года 2 месяца назад

Изменён 4 года 2 месяца назад

Просмотрен 994 раза

Есть такой каталог, в котором каждый блок должен иметь обводку 1px.

Если я задаю блоку обводку в 1px. то такая обводка получается только у крайних блоков, где обводки не пересекаются. Внутри получается по 2px. Есть какие-то варианты делать обводку по 1px? Пытался делать и через тень, но так как верстка адаптивная, то там идет смещение на пиксель.

Решил задачу следующим образом:

Задаю блоку обводку снизу и справа в 1px. А у родительского контейнера — сверху и слева. Не знаю, насколько это правильно 🙂

html
css

Если это просто div’ы, то можно margin‘ы слева и снизу прописать -1.

div {
    height: 50px;
    width:50px;
    border: 1px solid black;
    margin-right:-1px; margin-bottom:-1px;
}

<div>1</div>
<div>2</div>
<div>3</div>

на псевдо-таблицах и его свойство border-collapse:collapse;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.
  panel1 {
  width: 90%;
  margin: auto;
  display: table;
  border-collapse: collapse;
}

.panel1 .row {
  display: table-row;
  width: 100%;
  height: auto;
}

.panel1 .row .item {
  display: table-cell;
  border: 1px solid red;
  width: 25%;
  height: 200px;
}

<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

штрих-дашаррай | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия.

Начните с бесплатного кредита в размере 200 долларов США!

Свойство stroke-dasharray в CSS задает длину штрихов в штрихах фигур SVG. В частности, он устанавливает длину шаблона чередующихся штрихов и промежутков между ними .

 путь {
  штрих-дашаррай: 5; /* тире и пробелы имеют длину 5 единиц */
}

Это немного сбивает с толку, потому что stroke-dasharray — это презентационный атрибут SVG (например, ), который также можно использовать как свойство CSS в вашей таблице стилей, например:

Таким образом, вы должны запомнить:

Этот будет переопределять атрибут представления SVG, например.
Этот не будет переопределять встроенный стиль, например. <путь ... />

Где его использовать

Во-первых, это свойство специально разработано для работы с элементами SVG. Какие? Basically any SVG shape or text element:

<полилиния>

Syntax

 stroke-dasharray: none | <дашаррай> | наследовать;

Исходное значение: нет
Применяется к: SVG-фигурам и элементам текстового содержимого
Унаследовано: да
Анимация: да (неаддитивные)

Значения

 /* Значения ключевых слов */
штрих-дашаррай: нет;
штрих-дашаррай: наследовать;
/* Значения длины */
инсульт-дашаррай: 2
удар-дашаррай: 2,5
инсульт-дашаррай: 2эм
инсульт-дашаррай: 15%
/* Синтаксис с двумя значениями */
штрих-дашаррай: 2 4
штрих-дашаррай: 2 4% 5 4%
stroke-dasharray: 2em 4 6 8

Значения могут быть разделены пробелами или запятыми — на ваш выбор!

Безразмерные значения, вероятно, являются наиболее распространенным выбором, как это обычно бывает со значениями SVG. Они становятся единицами длины относительно системы координат, установленной viewBox .

Поведение паттерна

Невероятная вещь в stroke-dasharray заключается в том, что это просто набор значений длины, но он устанавливает как длину тире, так и промежутки между ними.

Если мы установим одно значение , длина штриха и длина промежутка примут это значение и повторят шаблон.

Но если мы установим два значения , первое установит тире, а второе установит пробел.

Если установить три значения :

Первое значение устанавливает первый дефис
Второе значение устанавливает первый пробел
Третье устанавливает второй дефис

Заметили что-то смешное? Вы можете подумать, что шаблон просто повторяется. Что на самом деле происходит, так это то, что шаблон продолжает циклически проходить через эти значения независимо от того, применяются ли они к тире или пробелам. Итак, что мы видим в последнем примере:

Тире: 5
Промежуток: 10
Тире: 15
Пробел: 5
Тире: 10
Пробел: 15
…и так далее.

Другими словами:

 штрих-дашаррай: 5 10 15
/* эквивалентно этому */
stroke-dasharray: 5 10 15 5 10 15

Таким образом, мы получаем хороший четный шаблон, даже если мы предоставляем нечетное количество значений.

 штрих-дашаррай: 5; /* 5 5 */
штрих-дашаррай: 5 10 15; /* 5 10 15 5 10 15 */
штрих-дашаррай: 5 10 15 20 25; /* 5 10 15 20 25 5 10 5 20 25 */

Хитрость с

stroke-dasharray

Вы когда-нибудь видели классные демонстрации, где SVG-форма рисует сама себя? Это трюк, который берет stroke-dasharray элемента и анимирует его в сочетании со свойством stroke-dashoffset .

 .путь {
  штрих-дашаррай: 1000;
  смещение штриха: 1000;
  анимация: рывок вперед на 5 секунд;
}
тире @keyframes {
  к {
    штрих-тиреофсет: 0;
  }
}

В этом посте мы рассмотрим эту технику более подробно.

Похоже, что IE 11 и более поздние версии не любят анимировать свойства обводки с помощью @keyframes, так что будьте осторожны.

Поддержка браузера

Дополнительная информация

Спецификация SVG 1.1
MDN по заливкам и штрихам

Альманах на 22 января 2016 г.

Инсульт

   Альманах  на
12 января 2016 г.  штрих-тиреофсет 
    Альманах  на
12 января 2016 г.  инсульт-linecap 
     Альманах  на
29 мая 2019 г.  инсульт-linejoin 
    Альманах  на
10 мая 2018 г.  ширина хода 
  пограничных блоков — CSS: Каскадные таблицы стилей 
 CSS-свойство   border-block   является сокращенным свойством для установки значений свойств границ отдельных логических блоков в одном месте таблицы стилей.
  border-block  можно использовать для установки значений одного или нескольких из  border-block-width  ,  border-block-style  и  border-block-color  , устанавливая как начало, так и конец в размер блока сразу. Физические границы, на которые он сопоставляется, зависят от режима записи элемента, его направленности и ориентации текста. Это соответствует  border-top  и  border-bottom  или  border-right  и  border-left  свойства в зависимости от значений, определенных для  write-mode  ,  direction  и  text-orientation  .
 Границы в другом измерении могут быть установлены с помощью  border-inline  , который устанавливает  border-inline-start  и  border-inline-end  .
 Это свойство является сокращением для следующих свойств CSS:
  цвет рамки 
  бордюрный блок 
  ширина блока границ 
 бордюрный блок: 1px;
бордюрный блок: 2 пикселя с точками;
бордюр: средний пунктирный синий;
/* Глобальные значения */
пограничный блок: наследовать;
бордюрный блок: начальный;
пограничный блок: вернуться;
пограничный блок: обратный слой;
пограничный блок: не установлен;
 
 Значения 
 Пограничный блок   определяется одним или несколькими из следующих элементов в любом порядке:
  <'ширина-границы'> 
 Ширина границы. См.  ширина границы  .
  <'бордюрный стиль'> 
 Стиль линии границы. См.  стиль границы  .
  <'цвет'> 
 Цвет границы. См.  цвет .
 пограничный блок = 
 <'border-block-start'> 
 Граница с вертикальным текстом 
 HTML 
 
  Пример текста

 
 CSS 
 раздел {
  цвет фона: желтый;
  ширина: 120 пикселей;
  высота: 120 пикселей;
}
.exampleText {
  режим письма: вертикальный-rl;
  бордюрный блок: 5 пикселей, пунктирный синий;
}
 
 Результаты 
 Спецификация
 Логические свойства и значения CSS, уровень 1 
  # propdef-border-block 
 Таблицы BCD загружаются только в браузере
 с включенным JavaScript. Включите JavaScript для просмотра данных. Логические свойства и значения CSS
 Это свойство сопоставляется с одним из физических свойств границ:  border-top  ,  border-right  ,  border-bottom  или  border-left  .

Обводка блока css: border-width — CSS | MDN

border-bottom | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

CSS по теме

Статьи по теме

Рецепты CSS

html — Как сделать обводку в 1 px у блоков?

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

штрих-дашаррай | CSS-трюки — CSS-трюки

Где его использовать

Syntax

Значения

Поведение паттерна

Хитрость с

Поддержка браузера

Дополнительная информация

Инсульт

штрих-тиреофсет

инсульт-linecap

инсульт-linejoin

ширина хода

пограничных блоков — CSS: Каскадные таблицы стилей

Значения

Граница с вертикальным текстом

HTML

CSS

Результаты

`Добавить комментарий Отменить ответ`

Рубрики