Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu
  • О чем это все
Menu

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

06.04.201122.11.2011

Несмотря на годы веб-разработки и чтения тематических блогов и книг по 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

9 комментариев

  1. Руслан:
    10.04.2011 в 12:44

    Век живи, век учись! :)

    Ответить
  2. Руслан:
    14.04.2011 в 19:43

    Незнал о таком также))

    Ответить
  3. Mid:
    30.04.2011 в 18:37

    Просто использовал border-top, border-left, border-right и border-bottom :)

    Ответить
  4. Xmodi:
    26.05.2011 в 11:44

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

    Ответить
  5. Stas:
    28.05.2011 в 20:07

    А это во всех браузерах работает?

    Ответить
  6. pomosh:
    30.06.2011 в 21:02

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

    Ответить
  7. Анастасия:
    12.03.2012 в 21:28

    Всегда нравится читать и учится,спасибо

    Ответить
  8. Александр:
    25.03.2012 в 08:13

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

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

    Ответить
    1. Екатерина Сумкина:
      02.03.2013 в 19:33

      И Вам спасибо. Отличное дополнение.

      Ответить

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

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

Об авторе

avatar

Ольга Фомина

Senior Frontend Developer
Почтовые технологии
telegram youtube instagram vkontakte

Рубрики

  • angular
  • JavaScript
  • nodejs
  • svg
  • wordpress
  • верстка
  • изучаем Jquery
  • общая
  • переводы
  • плагины Jquery
  • юнит-тесты
© 2023 Очередной блог фрилансера | Powered by Superbs Personal Blog theme