Границы

В таблице CSS для границ попадаются свойства, которые редко используются. На этой странице некоторые из таких свойств CSS для границы элемента.

сolor для границ

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

.example {
	background-color:#FFFFE0;
	color: #A0522D;
	padding:30px;
}

.example ul {
  border: solid 2px;
  text-align: left;
}

.example ol {
  text-align: left;
}

Взгляните на демо:

  • Экземпляр списка
  1. Экземпляр списка

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

… для других свойств, которые принимают значение цвета.

к меню ↑

border с набором границ

Уверен, это все делали:

.border-solid {
  border: solid 1px black;
}

Для границ есть целый набор свойств: border-style, border-width и border-color.

Например для border-width можно указать значение:

.border-width {
  border-width: 2px 5px 1px 0;
}

Это позволит установить разную ширину, разный стиль и цвет для каждой из четырех границ.

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: peachpuff chartreuse thistle firebrick;
  border-style: solid dashed dotted double;
  border-width: 10px 3px 1px 8px;
}

Все свойства в этом ужасном примере:

Кроме того, каждое из этих свойств может иметь свой стиль border-left-style, border-top-width.

Подвох в том, что Вы не можете использовать обычные границы с установленными различными значениями для разных сторон.

к меню ↑

Значения border-width словами

Не совсем из ряда вон, и это не новость, но в дополнение к стандартным значениям длины (напр. 5px или 1em), свойство border-width принимает три значения словами: medium, thin, и thick.

Начальное значение для свойства border-width является medium.

Демонстрация использует значение “medium”:

Многие разработчики веб-сайтов используют значение 1px, 3px, и 5px, когда точность ширины границы очень важная часть дизайна.

к меню ↑

border-image

Свойство border-image для CSS3, и поддерживается во всех современных браузерах, кроме Internet Explorer 10 и ниже. Но кого это волнует?

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

к меню ↑

CSS3 border-image

Границы в CSS3 из изображений создаются с помощью свойства “border-image”. Вот как это выглядит, необходимые свойства включены:

.border-image-example {  
  -webkit-border-image: url(border-image.jpg) 45 20 45 30 repeat;  
  -moz-border-image: url(border-image.jpg) 45 20 45 30 repeat;  
  border-image: url(border-image.jpg) 45 20 45 30 repeat;}

Значение состоит из трех разделов. Первый — это URL-адрес, указывающий на изображение. В следующем разделе (четыре числовых значения) представляет свойство border-image-slice. И последний раздел значений, это замостить изображение по границе.

к меню ↑

Поддержка border-image

к меню ↑

Заключение

Наиболее опытные разработчики CSS знают многие свойства, если не все. Но скорее всего, эти свойства CSS в примерах дают больше понимая их применения, независимо от опыта.