ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Бордюр css

2018/05/31 Марат 858 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

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) https://dwweb.ru/ http://calc.dwweb.ru/ http://kod.dwweb.ru/ http://marrex.ru/ http://pro.dwweb.ru/ https://f0rlink.com/ https://comments.dwweb.ru youtube Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019