CSS
бордюр

Синтаксис

• граница

• border: border-border border-style border-color | начальная | наследовать;

• border-top: border-width border-style border-color | начальная | наследовать;

• border-bottom: border-width border-style border-color | начальная | наследовать;

• border-left: border-width border-style border-color | начальная | наследовать;

• border-right: border-width border-style border-color | начальная | наследовать;

• стиль границы

• пограничный стиль: 1-4 нет | скрытый | пунктирный | пунктирный | твердый | двойной | паз | гребень | вставка | начало | начальная | наследовать;

• граница радиуса

• border-radius: 1-4 длина | % / 1-4 длина | % | начальная | наследовать;

• border-top-left-radius: length | % [длина | %] | начальная | наследовать;

• border-top-right-radius: length | % [длина | %] | начальная | наследовать;

• border-bottom-left-radius: length | % [длина | %] | начальная | наследовать;

• border-bottom-right-radius: length | % [длина | %] | начальная | наследовать;

• границы изображения

• border-image: border-image-source border-image-slice [border-image-width [border-image-outset]] border-image-repeat

• border-image-source: none | образ;

• border-image-slice: 1-4 номер | % [fill]

• border-image-repeat: 1-2 стрейч | повторить | круглый | пространство

• границы коллапса

• пограничный коллапс: отдельный | коллапс | начальная | унаследовать

замечания

граница радиуса

Свойство border-radius позволяет вам изменить форму базовой модели коробки.

Каждый угол элемента может иметь до двух значений, для вертикального и горизонтального радиуса этого угла (максимум 8 значений).

Первый набор значений определяет горизонтальный радиус. Дополнительный второй набор значений, которому предшествует «/», определяет вертикальный радиус. Если задан только один набор значений, он используется как для вертикального, так и для горизонтального радиуса.

border-radius: 10px 5% / 20px 25em 30px 35em;

10px - это горизонтальный радиус верхнего левого и нижнего правого. И 5% - это горизонтальный радиус верхнего правого и нижнего левого. Остальные четыре значения после «/» представляют собой вертикальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого.

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

HTML:

<div class='box'></div>

CSS:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Пограничный радиус чаще всего используется для преобразования элементов окна в круги. Установив радиус границы на половину длины квадратного элемента, создается круговой элемент:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

Поскольку граничный радиус принимает проценты, обычно используется 50%, чтобы избежать ручного вычисления значения граничного радиуса:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Если значения ширины и высоты не равны, результирующая фигура будет овальной, а не круговой.

Пример граничного радиуса действия браузера:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

стиль границы

Свойство border-style устанавливает стиль границы элемента. Это свойство может иметь от одного до четырех значений (для каждой стороны значения элемента один).

Примеры:

border-style: dotted;

border-style: dotted solid double dashed;

border-style также может иметь значения none и hidden . Они имеют тот же эффект, за исключением hidden работ для разрешения конфликтов границ для элементов <table> . В <table> с несколькими границами none них none имеет наименьшего приоритета (значение в конфликте, граница будет отображаться), а hidden имеет самый высокий приоритет (что означает конфликт, граница не будет отображаться).

граница (стенограммы)

В большинстве случаев вы хотите определить несколько свойств границы ( border-width , border-style и border-color ) для всех сторон элемента.

Вместо того, чтобы писать:

border-width: 1px;
border-style: solid;
border-color: #000;

Вы можете просто написать:

border: 1px solid #000;

Эти сокращения также доступны для каждой стороны элемента: border-top , border-left , border-right и border-bottom . Таким образом, вы можете:

border-top: 2px double #aaaaaa;

границы изображения

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

border-image существу состоит из

• border-image-source : путь к изображению, которое будет использоваться
• border-image-slice : Задает смещение, которое используется для разделения изображения на девять областей (четыре угла , четыре края и средний )
• border-image-repeat : определяет, как масштабируются изображения для сторон и середины пограничного изображения

Рассмотрим следующий пример, где border.png является изображением 90x90 пикселей:

border-image: url("border.png") 30 stretch;

Изображение будет разделено на девять областей с 30x30 пикселями. Края будут использоваться в качестве углов границы, в то время как сторона будет использоваться между ними. Если элемент выше / шире, чем 30 пикселей, эта часть изображения будет растянута . По умолчанию средняя часть изображения будет прозрачной.

внешних пунктов пропуска [влево | вправо | верхняя | нижняя]

Свойство border-[left|right|top|bottom] используется для добавления границы к определенной стороне элемента.

Например, если вы хотите добавить границу в левую часть элемента, вы можете сделать следующее:

#element {
    border-left: 1px solid black;
}

границы коллапса

Свойство border-collapse применяется только к table s (и элементам, отображаемым как display: table или inline-table ), и устанавливает, сворачиваются ли границы таблицы в одну границу или отделяются, как в стандартном HTML.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

Также см. Раздел «Таблицы - оглавление границ»

Несколько границ

Использование контуров:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Использование box-shadow:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Использование псевдоэлемента:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Создание многоцветной границы с использованием пограничного изображения

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

В приведенном выше примере будет создана граница, состоящая из 5 разных цветов. Цвета определяются с помощью linear-gradient (вы можете найти дополнительную информацию о градиентах в документах ). Вы можете найти дополнительную информацию о свойстве border-image-slice в примере border-image на той же странице.

( Примечание: дополнительные свойства были добавлены к элементу для целей презентации ).

Вы заметили бы, что левая граница имеет только один цвет (начальный цвет градиента), а правая граница также имеет только один цвет (цвет конца градиента). Это связано с тем, как работает свойство border image. Это похоже на то, что градиент применяется ко всей коробке, а затем цвета маскируются из областей заполнения и содержимого, что делает его похожим на градиент.

Какая граница (ы) имеет один цвет, зависит от определения градиента. Если градиент - это to right градиент, левая граница будет начальным цветом градиента, а правая граница будет цветом конца. Если бы это был to bottom градиент, верхняя граница была бы цветом начала градиента, а нижняя граница была бы конечной. Ниже представлен выход цветного градиента to bottom 5.

Если граница требуется только на определенных сторонах элемента, то свойство border-width можно использовать так же, как и с любой другой обычной границей. Например, добавление кода ниже приведет к созданию границы только в верхней части элемента.

border-width: 5px 0px 0px 0px;

Обратите внимание, что любой элемент, обладающий свойством border-image , не будет уважать border-radius (то есть граница не будет кривая). Это основано на приведенном ниже описании в спецификации:

Фон фона, но не его пограничное изображение, привязывается к соответствующей кривой (как определено «background-clip»).