Иногда необходимо добавить какому-либо элементу в html границу, т.е. линию вокруг элемента. Для этого создано свойство border, ему можно присвоить необходимый цвет, толщину и стиль.
Например, самый часто используемый вариант границы:
Возможно выделение кнопки, с помощью границы:
В этих примерах граница имеет цвет #333, ширину линии равную 1px, стиль начертания solid (т.е. сплошная)
Стили начертания :
Стили начертания бывают 8-ми видов. Все они представлены ниже.
1 2 3 4 5 6 7 8 9 | <style> div.my_button{ background : #eee ; border : 1px solid #333 ; display :inline- block ; padding : 10px 25px ; } </style> <div class= 'my_button' >Кнопка</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style> div.my_button_with_hover{ padding : 10px 25px ; background : #eee ; border : 2px solid #333 ; display :inline- block ; width : 200px ; text-align : center ; margin-top : 15px ; } div.my_button_with_hover:hover{ border-color : #ccc ; } </style> <div class= 'my_button_with_hover' >Наведи на меня</div> |
Спасибо за внимание.