CSS: Свойство border-color

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

CSS: Свойство border-color

Сообщение Александр » 05 сен 2013, 09:43

Данное свойство отвечает за цвет рамки вокруг выбранного элемента, причем возможно оказание влияния как на все четыре стороны сразу, так и на каждую по отдельности.
Возможно использовать одно, два, три или четыре значения. Полученный результат будет зависеть от количества примененных значений.
Если будет применено:
одно значение - цвет будет применен для всех сторон рамки
два значения - первое будет применено для верхней и нижней стороны рамки, второе для правой и левой стороны рамки
три значения - первое будет применено для верхней стороны рамки, второе для правой и левой стороны рамки, третье для нижней стороны рамки
четыре значения - в данном случае к рамке применяется последовательное применение цветов в таком порядке: к верхней, к правой, к нижней и к левой
Пример кода:
Код: выделить все
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство border-color</title>
  <style>
   h1 {
    border-color: green white; /* Цвет границы, первое значение для верхней и нижней, второе для левой и правой */
    border-style: solid; /* Стиль границы */ 
   }
   p {
    border-color: #997b33; /* Цвет границы */
    border-style: solid; /* Стиль границы */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
 
  <h1>ПРИВЕТ CSS</h1>
  <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
 
 </body>
</html>

Что в итоге получится:
bc01.png
Применение свойства border-color
bc01.png (15.43 KiB) Просмотров: 3311
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 218
Зарегистрирован: 12 мар 2012, 16:32

Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3

cron