| | | | | |
Бордюр css
2018/05/31
Марат
856
0
HTML | CSS |
Для чего вообще нужен бордюр – border – это один из тех элементов. Который часто используется и применяется на страницах сайта! Лично для меня кажется, что бордюры оживляют вашу страницу, в тех местах, где требуется подчеркнуть важность данного текста. Либо подчеркнуть заголовок.
С бордюром – это видится как законченное предложение! И на этой странице вы можете наблюдать использование бордюра для подчеркивания заголовков и не только!
Мы уже писали о
границах таблицы, там в принципе все рассказано о бордюре(border).
Не будем повторять о том, как прописывать стили,
и какие они бывают.
Но мы не рассматривали там нюансы, о которых поговорим на этой странице.
Расположение бордюра.
У объекта, ну к примеру "div" есть четыре грани, поэтому и бордюр может быть показан и декорирован с четырех сторон. Для того, чтобы этот обьект был виден мы его покрасим в цвет "background-color:
#edc2e6; "
Бордюр слева
Начнем с расположения бордюра слева.
Здесь текст в div "border-left: 2px solid"
Бордюр сверху
Здесь текст в div "border-top: 2px solid"
Бордюр справа
Здесь текст в div "border-right: 2px solid"
Бордюр снизу
Здесь текст в div "border-bottom: 2px solid"
Толщина бордюра
Про толщину бордюра вы наверное догадались, что это 2px.
Цвет бордюра
Здесь текст в div "border-bottom: 2px solid" и цвет красный "border-color: red;"
Можно и цифровое значение цвета поставить -
"Подобрать цвета"
Бордюр вокруг объекта
Ну и далее если вам нужно поставить бордюр вокруг объекта, то просто пишем "border: 2px solid"
Здесь текст в div "border: 2px solid" и цвет красный "border-color: red;"
Отступы вокруг бордюра
Для того, чтобы сделать отступы внутри объекта с размером в 10px, до бордюра пишем - "padding: 10px;"
Здесь текст в div "border: 2px solid" и цвет красный "border-color: red;" с внутренним отступом "padding: 10px;"
Отступы снаружи бордюра
Если требуются отступы снаружи бордюра, то делаем "margin" - к примеру в 20px
Здесь текст в div "border: 2px solid" и цвет красный "border-color: red;" + с внутренним отступом "padding: 10px;" + с наружном отступом "margin: 20px;"
Радиус бордюра
Если требуется закруглить углы, то делаем "border-radius" к примеру в 15px "border-radius: 15px;"
Кстати, тут мы как-то делали о
кругах и там как раз мы использовали это свойство.
Здесь текст в div "border: 2px solid" и цвет красный "border-color: red;" + с внутренним отступом "padding: 10px;" + с наружном отступом "margin: 20px;" с радиусом бордюра "border-radius: 15px;"
И это всего лишь малая часть того, что можно применить к бордюрам! Думаю, что периодически будем возвращаться к теме бордюра!
С вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
css бордюрбордюр снизу csscss внутренний бордюрбордюр html