Блочная модель в CSS3

Свойство 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"

  Источник

  Thin solid border html

  

  Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

  Для настройки границы могут использоваться сразу несколько свойств:

  • border-width : устанавливает ширину границы
  • border-style : задает стиль линии границы
  • border-color : устанавливает цвет границы

  Свойство border-width может принимать следующие типы значений:

  Значения в единицах измерения, таких как em, px или cm

  Свойство border-color в качестве значения принимает цвет CSS:

  Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:

  

  • none : граница отсутствует
  • solid : граница в виде обычной линии
  • dashed : штриховая линия
  • dotted : линия в виде последовательности точек
  • double : граница в виде двух параллельных линий
  • groove : граница имеет трехмерный эффект
  • inset : граница как бы вдавливается во внутрь
  • outset : аналогично inset, только граница как бы выступает наружу
  • ridge : граница также реализует трехмерный эффект

       div  

  

  При необходимости мы можем определить цвет, стиль и ширину границы для каждой из сторон используя следующие свойства:

  /* для верхней границы */ border-top-width border-top-style border-top-color /* для нижней границы */ border-bottom-width border-bottom-style border-bottom-color /* для левой границы */ border-left-width border-left-style border-left-color /* для правой границы */ border-right-width border-right-style border-right-color

  Свойство border

  Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство — border :

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

  border-top border-bottom border-left border-right

  Их использование аналогично:

  Радиус границы

  Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.

       div  

  Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

  

  Так как у элемента может быть максимально четыре угла, то мы можем указать четыре значения для установки радиуса у каждого углов:

  border-radius: 15px 30px 5px 40px;

  

  Вместо общей установки радиусов для всех углов, можно их устанавливать по отдельности. Так, предыдущее значение border-radius можно переписать следующим образом:

  border-top-left-radius: 15px; /* радиус для верхнего левого угла */ border-top-right-radius: 30px; /* радиус для верхнего правого угла */ border-bottom-right-radius: 5px; /* радиус для нижнего левого угла */ border-bottom-left-radius: 40px; /* радиус для нижнего правого угла */

  Также border-radius поддерживает возможность создания эллиптических углов. То есть угол не просто скругляется, а использует два радиуса, образуя в итоге душу эллипса:

  В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.

  Источник

  Читайте также:  Javascript check if function exists