Красивая граница блока css

Свойство CSS border

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

1. Синтаксис CSS border

border: border-width border-style border-color | inherit;

• border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
• border-style — стиль выводимой рамки. Может принимать следующие значения
  • none или hidden — отменяет границу
  • dotted — рамка из точек
  • dashed — рамка из тире
  • solid — простая линия (применяется чаще всего)
  • double — двойная рамка
  • groove — рифленая 3D граница
  • ridge , inset , outset — различные 3D эффекты рамки
  • inherit — применяется значение родительского элемента

  Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

  2. Примеры с различными границами рамок CSS border

  2.1. Пример. Разные стили оформления границы рамки border-style

  html> head> style> .border_style_dotted< border: 2px dotted #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_dashed< border: 2px dashed #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_solid< border: 2px solid #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_double< border: 2px double #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_groove< border: 5px groove #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_ridge< border: 5px ridge #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_inset< border: 5px inset #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_outset< border: 5px outset #1E90FF; padding: 3px; margin-bottom: 5px; > .border_complex< border-left: 5px solid #1E90FF; border-right: 5px dotted #1E90FF; border-top: 5px double #1E90FF; border-bottom: 5px dashed #1E90FF; padding: 3px; margin-bottom: 5px; > /style> /head> body> div class css">border_style_dashed">border-style: dashed/div> div class css">border_style_dashed">border-style: dashed/div> div class css">border_style_solid">border-style: solid/div> div class css">border_style_double">border-style: double/div> div class css">border_style_groove">border-style: groove/div> div class css">border_style_ridge">border-style: ridge/div> div class css">border_style_inset">border-style: inset/div> div class css">border_style_outset">border-style: outset/div> div class css">border_complex">Четыре разных рамки/div> /body> /html>

  Вот как это выглядит на странице:

  2.2. Пример. Изменения цвета рамки при наведении курсора мыши

  Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

  html> head> style> .border_hover< border: 2px solid #1E90FF; padding: 5px; width: 500px; height: 60px; > .border_hover:hover< border: 2px solid #F0F; padding: 5px; > /style> /head> body> div class css">border_hover">При наведении курсора мыши на блок цвет рамки изменится/div> /body> /html>

  Вот как это выглядит на странице:

  2.3. Пример. Как сделать прозрачную рамку border

  Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

  html> head> style> .opacity_border< border: 10px solid rgba(80, 55, 80, 0.5); background: url('img/primer-fona.jpg'); width: 130px; height: 116px; > /style> /head> body> div class css">opacity_border"> /div> /body> /html>

  Вот как это выглядит на странице:

  3. Толщина границы: свойство border-width

  Задает толщину линии. Ранее мы задавали ее в едином описании border.

  Синтаксис CSS border-width

  border-width: thin | medium | thick | значение;

  • thin — тонкая толщина линии
  • medium — средняя толщина линии
  • thick — толстая толщина линии

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

  html> head> style> .border_width_thin< border-style: solid; border-color: #1E90FF; border-width: thin; > .border_width_medium< border-style: solid; border-color: #1E90FF; border-width: medium; > .border_width_thick< border-style: solid; border-color: #1E90FF; border-width: thick; > .border_width< border-style: solid; border-color: #1E90FF; border-width: 1px 2px 3px 4px; > /style> /head> body> div class css">border_width_thin">border-width: thin/div> div class css">border_width_medium">border-width: medium/div> div class css">border_width_thick">border-width: thick/div> div class css">border_width">Разная толщина у границ/div> /body> /html>

  Вот как это выглядит на странице:

  4. Как сделать рамку border только с одного края (границы)

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

  • border-top — для задания рамки сверху (верхняя граница)
  • border-bottom — для задания рамки снизу (нижняя граница)
  • border-right — для задания рамки справа (правая граница)
  • border-left — для задания рамки слева (левая граница)

  Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

  • border-top-color — задание цвета верхний границы
  • border-top-style — задание стиля верхней границы
  • border-top-width — задание толщины верхней границы
  • и т.д. для каждого направления

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

  /* Описание двух одинаковых стилей: */ style> .svoystvo1< border-top: 1px solid #DEB887; > .svoystvo2< border-top-color: #DEB887; border-top-style: solid; border-top-width: 1px; > /style>
   

  4.1. Пример. Красивая рамка для выделения цитат

  html> head> style> .primer_ramka_citata< width: 300px; height: 200px; border: 1px solid #DEB887; border-left: 2px dashed #006400; background: #EEE8AA; padding: 5px; margin-bottom: 5px; > /style> /head> body> div class css">primer_ramka_citata">Пример рамки для цитаты/div> /body> /html>

  Вот как это выглядит на странице:

  Примечание
  Можно задать отдельную границу для каждой из сторон.

  5. Как сделать несколько границ border у элемента html

  Иногда требуется сделать несколько границ. Приведем пример

  5.1. Первый вариант с несколькими границами

  html> head> style> .neskolko_granic < width: 200px; height: 200px; position: relative; border: 10px solid orange; > .neskolko_granic:after, .neskolko_granic:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; > .neskolko_granic:after < border: 5px solid red; outline: 5px solid yellow; > .neskolko_granic:before < border: 10px solid green; > /style> /head> body> div class css">neskolko_granic"> /div> /body> /html>

  Вот как это выглядит на странице:

  Есть второй способ через наложение теней.

  5.2. Наложение теней для создания нескольких границ

  html> head> style> .neskolko_granic_2 < border: 5px solid red; width: 150px; height: 150px; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; > /style> /head> body> div class css">neskolko_granic_2"> /div> /body> /html>

  Вот как это выглядит на странице:

  6. Скругление углов у границ (border-radius)

  Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

  div style value2">width:200px; height:100px; border:3px solid #ae0; border-radius: 10px">div>

  Более подробно про свойство border-radius читайте в отдельной статье: как скруглить углы у рамок в HTML.

  7. Вдавленная линия CSS

  Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

  html> head> style> .vdavlennaya_liniya < border: 1px solid #222; border-bottom: 1px solid #333; > /style> /head> body> hr class css">vdavlennaya_liniya" /> /body> /html>

  Вот как это выглядит на странице:

  Для обращения к border из JavaScript нужно писать следующую конструкцию:

  [window.]document.getElementById("elementID").style.border value">VALUE"

  Источник

  Как создать рамку вокруг элемента. CSS-свойство border

  CSS-свойство border используется для задания стиля, толщины и цвета границы элемента. Граница — это линия, которая окружает элемент и отделяет его контент от соседних элементов. С помощью свойства border можно создавать различные рамки — от простых одноцветных линий до сложных узоров и теней.

  В общем виде свойство записывается так:

  border-width — задаёт толщину границы.

  border-style — устанавливает стиль рамки.

  border-color — определяет цвет рамки.

  

  Значения свойства border

  Border-width

  Свойство border-width определяет толщину рамки и может быть задано в пикселях ( px ), процентах ( % ) или описано ключевым словом — thin , medium , thick .

  • thin — тонкая граница, обычно около одного пикселя.
  • medium — средняя граница, около трёх пикселей.
  • thick — толстая граница, примерно пять пикселей.

  Border-style

  border-style — задаёт стиль границы и может принимать одно из значений — none , hidden , dotted , dashed , solid , double , groove , ridge , inset , outset .

  hidden — граница скрыта, но она занимает место.

  solid — сплошная линия границы.

  groove — объёмная рифлёная вдавленная рамка.

  ridge — объёмная рифлёная выпуклая рамка.

  inset — объёмная вдавленная рамка.

  outset — объёмная выпуклая рамка.

  Border-color

  border-color — определяет цвет рамки и может быть задан в виде ключевого слова, соответствующего названию цвета, hex-кода, rgb или hls значений. Значение currentColor использует текущий цвет текста в качестве цвета границы.

  Наследование

  Свойство border не наследуется от родительских элементов. Граница, заданная для одного элемента, не будет применяться к его дочерним элементам.

  ⭐ Свойство border поддерживается современными браузерами. Актуальная информация — на caniuse.com.

  Для чего использовать свойство border

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

  Созданиетенейили выделений. Свойство border можно комбинировать с другими свойствами, такими как box-shadow или outline , для создания различных эффектов теней или выделений.

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

  Нюансы

  Если нужно задать отдельные значения для каждой стороны границы, рекомендуется использовать отдельные свойства border-top , border-right , border-bottom и border-left .

  

  Для создания рамок с закруглёнными углами используют свойство border-radius .

  

  Чем заменить свойство

  Для создания более сложных границ или декоративных элементов можно использовать свойства box-shadow , outline или border-image .

  Материалы по теме

  «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

  Источник

  Читайте также:  Type php type show