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

CSS-рамка

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля , заполнение . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок HTML-элементов с помощью CSS-свойства

1. Стиль рамки-рамки

По умолчанию рамки всегда отрисовываются поверх фона элемента, распространяется до внешнего края элемента.Без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойств border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

Синтаксис

  p {border-style: solid;}
p {border-top-style: solid;}  

2. Цвет рамки border-color

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

Синтаксис

  p {border-color: # cacd58;}  

3. Ширина рамки border-width

Ширина рамки задается с помощью единицы измерения длины или ключевых слов. Если для свойств border-style задано значение

Синтаксис

  p {border-width: 2px;}  

4. Задание рамки одним своимством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

  div {
ширина: 100 пикселей;
высота: 100 пикселей;
граница: 2 пикселя сплошного серого цвета;
}  

При этом заданные свойства элементы ко всем границам одновременно.Если какое-то из значений не указано, его место займет значение по умолчанию.

5. Задание рамки для одной границы элемента

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

Стиль верхней границы задается с помощью свойств border-top , lower — border-bottom , левой — border-left , правой — border-right .

Синтаксис

  p {border-top: 2px сплошной серый;}  

бордюрный цвет | htmlbook.ru

Краткая информация

Версии CSS

Описание

Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанного.

Синтаксис

цвет рамки: [цвет | прозрачный] {1,4} | унаследовать

Значения

См. цвет

прозрачный

Устанавливает прозрачный цвет.

унаследовать

Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

  

 
  
  
  <стиль>
   h2 {
    цвет границы: красный белый; / * Цвет границы * /
    стиль границы: твердый; / * Стиль границы * /
   }
   п {
    цвет границы: # 008a77; / * Цвет границы * /
    стиль границы: твердый; / * Стиль границы * /
    отступ: 5 пикселей; / * Поля вокруг текста * /
   }
  
 
 
 
  
   
 Lorem ipsum dolor sit amet 
 
  
 Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
  

Результат данного примера показан на рис. 1.

Рис. 1. Использование свойств border-color

Объектная модель

[окно.] Document.getElementById («elementID»). Style.borderColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает наследование.

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