borderproperty

Кое-что интересное о CSS-свойстве border

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

Возможно это моя вина, я человек привычки, и никогда не рассматирваю подробно вещи, которые мне давно знакомы.

Так, во время чтения книги Smashing Book 2, в главе Кристиана Хейлмана был приведен пример следующего CSS-кода:

#pagetitle {  
    border-color: black white white black;  
}  

Первое, о чем я подумал: «Это какая-то ошибка. С каких пор свойство border-color позволяет в сокращенной форме указывать цвет для каждой границы блока?». А затем, я вспомнил, что за 10 лет разработки, я использовал это свойство один или два раза, следовательно, что я могу о нем знать? Плюс, я думаю что Кристиан, как опытный разработчик, знает о чем говорит.

Фактически, каждый раз, когда мне нужно было указать цвет границы, я использовал сокращенную версию свойства border, вот так:

#pagetitle {  
    border: solid 1px black;  
}  

Редко когда мне действительно приходится использовать свойства типа: border-color, border-style, border-left-style или любые другие версии этих длинных свойств. В 99% случаев, свойство border реализует все, что мне требуется.

В CSS-справочнике на sitepoint.com сказано:

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

Следовательно, точно так же как для свойств margin и padding, цвет для каждой границы задается в следующем порядке: верхняя граница, правая граница, нижняя граница, левая граница (по часовой стрелке, начиная сверху).

Стиль и ширина границы

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

Ну и конечно, вы можете сокращать свойства, при необходимости:

#pagetitle {  
    border-width: 2px 1px;  
    border-style: solid dashed;  
}  

Снова, также как у margin и padding, мы указываем только первые два значения, а остальные просто наследуются от первых.

Запомните

Нельзя использовать эту технику мульти-объявления для сокращенного CSS-свойства border (несмотря на то, что это кажется вполне логичным). Оно применяется только к трем, указанным выше, свойствам, так что следующий код будет неправильным:

#pagetitle {  
    /* THIS IS INVALID! */  
    border: solid dashed 1px 2px black white white black;  
}  

Еще, такой метод не получится применить к свойствам outline-width, outline-style и outline-color.

Перевод статьи «Here’s Something Interesting About CSS Borders», автор Louis Lazaris

Кое-что интересное о CSS-свойстве border: 9 комментариев

  1. А как изменить цвет под текстом в нужном и определенном месте, просто я пытаюсь сделать- у меня всё меняется а не часть

  2. Да, иногда полезно перечитывать справочники и учебники (всегда найдеш что-нибудь новенькое)

  3. Добрый день!
    Огромное спасибо за Ваш блог, за написанные и переведенные Вами статьи.
    Очень интересно и познавательно.
    По поводу данной статьи, есть одно дополнение…
    Свойство border, имеет еще одну интересную особенность, а именно:
    границы делят между собой углы в равных долях.
    Пример:
    .block {
    border-color: blue red aqua green;
    border-style: solid;
    border-width: 250px 100px 250px 250px;
    height: 0px;
    width: 0px;
    }

    Надеюсь, что данная заметка будет кому-нибудь полезна.
    С Уважением, Александр (Екатеринбург)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *