border | CSS
Cвойство border (w3.org) позволяет установить толщину, стиль и цвет границы элемента.
div <border: 3px none rgb(34, 34, 34); /* или */border-top: 3px none rgb(34, 34, 34); border-right: 3px none rgb(34, 34, 34); border-bottom: 3px none rgb(34, 34, 34); border-left: 3px none rgb(34, 34, 34); /* или */ border-style: none; /* одновременно для четырёх границ элемента(верхняя и нижняя граница) (левая и правая граница)(верхняя граница) (левая и правая граница) (нижняя граница)(верхняя граница) (правая граница) (нижняя граница) (левая граница) */ border-color: rgb(34, 34, 34); /* одновременно для четырёх границ элемента(верхняя и нижняя граница) (левая и правая граница)(верхняя граница) (левая и правая граница) (нижняя граница)(верхняя граница) (правая граница) (нижняя граница) (левая граница) */ border-width: 3px; /* одновременно для четырёх границ элемента(верхняя и нижняя граница) (левая и правая граница)(верхняя граница) (левая и правая граница) (нижняя граница)(верхняя граница) (правая граница) (нижняя граница) (левая граница) */ /* или */ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: rgb(34, 34, 34); border-right-color: rgb(34, 34, 34); border-bottom-color: rgb(34, 34, 34); border-left-color: rgb(34, 34, 34); border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; >
Прозрачный border CSS
Чтобы сделать прозрачный border следует цвет написать в rgba: теория, конвертер.
Один блок находится внутри другого. Сквозь полупрозрачную границу нужно увидеть фон родителя. Если у потомка есть свой собственный фон, то требуется его (фон дочернего элемента) убрать с границы обводки блока.
Чтобы у изображения были полупрозрачные края, сквозь которые просвечивала эта же картинка, а не фон родителя, лучше применить outline .
Внутренний border . Управление длиной блока
Если задано width: auto; , то ширина элемента равна ширине родителя. Она не увеличивается за счёт margin , border и padding .
width: auto; (по умолчанию)
В остальных случаях border , как и padding , расширяет коробку элемента. То есть если неправильно рассчитать width , то блок переместится вниз, не поместившись в ограниченное пространство, меню будет некрасиво удлиняться и т.п..
margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right= ширина коробки элемента
Дабы сделать так, чтобы рамка не увеличивала блок, нужно указать box-sizing: border-box; . Тогда border и padding не будут влиять на ширину контейнера элемента.
border: 10px solid yellow;
padding: 10px;
box-sizing: border-box;
width: 240px;
width: 120px;
width: 120px;
Пунктирная обводка внутри HTML блока
Задача: пройти пунктиром по периметру на некотором расстоянии от краёв элемента. Эффект будет такой, как будто на швейной машинке прошили полотно и остались на ткани стежки. Если у кнопки углы закругленны, фон задан градиентом или картинкой, текст должен выделяться мышкой и нужно обойтись одним тегом, то единственно верным решением будет воспользоваться :after:
какой-то текст
какой-то текст
Рамка в процентах
Ширина рамки border-width может устанавливаться в любых единицах измерения, но не в процентах, также как и box-shadow , и outline . Для однотонных линий можно использовать background . Из-за того, что не хочется лишаться padding , нужен ещё и :after :
резиновый border
какой-то текст
Вдавленная линия CSS
Эффект вдавленной линии достигается когда верхняя полоса темнее, нижняя — светлее; выпуклой наоборот.
Все о свойстве border
Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?
Основы
Всем знакомо такое использование:
border: 1px solid black;Это однопиксельная сплошная рамка. Немного меняем синтаксис:
border-width: thick; border-style: solid; border-color: black;
Например у параметра border-width есть три параметра: thin, medium, thick:
Если необходимо менять цвет границы при наведении на объект:
.box < border: 1px solid red; >.box:hover
Но так это реализовать проще и правильнее:
.box < border: 1px solid red; >.box:hover
Border-Radius
border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Для каждого угла можно назначить свое закругление:
border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;
В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:
/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;А вот как можно нарисовать лимон средствами CSS:
.lemon
Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.
Несколько границ
Border-Style
solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.
border: 20px groove #e3e3e3;Или более подробно:
border-color: #e3e3e3; border-width: 20px; border-style: groove;
Outline
Самый популярный способ создания двойной границы — это параметр outline:
Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.
Псевдоэлементы
Можно использовать такую конструкцию:
.box < width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; >/* Create two boxes with the same width of the container */ .box:after, .box:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; >.box:after < border: 5px solid red; outline: 5px solid yellow; >.box:before
Возможно это не самое элегантное решение, однако оно работает
Box-Shadow
Еще один способ, с применением теней:
Изменение углов
К параметру border-radius можно применять два значения, используя «/», например:
border-radius: 50px / 100px; /* horizontal radius, vertical radius */Это то же самое, что:
border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:
CSS фигуры
В следующих примерах предполагается такая разметка:
И такой базовый css:
Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:
.arrow
Или то же самое:
.arrow
.arrow
А теперь оставляем только синий треугольник:
.arrow
Создание Speech Bubble
Наша базовая разметка:
Hi there!.speech-bubble < position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; >
Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:
.speech-bubble:after
Оставляем только четверть квадратика:
.speech-bubble:after
Теперь перемещаем ниже и закрашиваем:
.speech-bubble < /* … other styles */ border-radius: 10px; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ >
Примеры применения:
/* Speech Bubbles Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTIONHi there*/ .speech-bubble < position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; >/* Position the Arrow */ .speech-bubble-top:after < border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; >.speech-bubble-right:after < border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; >.speech-bubble-bottom:after < border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; >.speech-bubble-left:after
Вертикальное центрирование текста
минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:
.speech-bubble < /* other styles */ display: table; >.speech-bubble p
Еще один пример нестандартного использования границ:
.biohazard
Итог
Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.
border
CSS свойство border позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.
Значения разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному параметру. Все три значения указывать не обязательно, ширину и/или цвет можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, т.е. если к примеру не указана ширина, то будет использовано значение по умолчанию свойства border-width . В таблице, расположенной под синтаксисом, указано значения каких именно свойств можно использовать.
Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.
Совет: как правило, при использовании рамки требуется добавлять внутренние отступы. Они добавляют пустое пространство между рамкой блока и его содержимым: текстом, картинками или дочерними тегами. Обычно граница отображается вплотную к содержимому элемента, это полезно только в том случае, если нужно задать рамку вокруг картинки.
| Значение по умолчанию: | не определено |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да, смотрите каждое свойство, входящее в состав краткого метода, отдельно |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.border=»3px solid blue» |
Синтаксис
border: border-width border-style border-color|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| border-width | Указывает ширину для рамки с помощью любой допустимой единицы измерения CSS (кроме процентов). |
| border-style | Указывает стиль для рамки, который определяется одним из ключевых слов: solid , dotted , dashed , double , groove , ridge , inset , outset , hidden и none . Значения hidden и none являются взаимозаменяемыми, они указывают, что рамка отсутствует. |
| border-color | Задает цвет для рамки одним из следующих способов: имя цвета, шестнадцатеричное значение или RGB, выбрать подходящий цвет или значение можно с помощью таблицы цветов. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Пример pЗдесь содержится какой-то текст.
Результат данного примера в окне браузера:
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Как сделать бордюр или рамку вокруг элемента HTML, CSS свойство border
13.08.18 ИТ / CSS 8917
Очень часто при разработке сайтов бывает необходимо на какой-либо странице размещать элементы, которые должны иметь бордюры или рамки. Эту задачу можно решить при помощи специального CSS свойства – border. Оно позволяет не только задать бордюр, но и гибко настроить его.
Свойство CSS border является универсальным, это значит, что оно содержит различные другие свойства с префиксом border. Значения в свойстве border можно указать в любом порядке через пробел.
Какие есть CSS свойства из семейства border? Список приводится ниже:
- border-bottom — управляет отображением только нижнего бордюра;
- border-bottom-color – задает цвет нижнего бордюра;
- border-bottom-left-radius — задает радиус скругления нижнего левого угла бордюра;
- border-bottom-right-radius — задает радиус скругления нижнего правого угла бордюра;
- border-bottom-style – задает стиль отображения нижнего бордюра;
- border-bottom-width – задает ширину нижнего бордюра;
- border-collapse — задает, как отображать границы вокруг ячеек таблицы, значения: collapse, separate, inherit;
- border-color – задает цвет бордюра;
- border-image – позволяет задать рисунок в качестве фона бордюра;
- border-left — управляет отображением только левого бордюра;
- border-left-color — задает цвет левого бордюра;
- border-left-style — задает стиль отображения левого бордюра;
- border-left-width — задает ширину левого бордюра;
- border-radius – задает радиус скругления углов бордюра;
- border-right — управляет отображением только правого бордюра;
- border-right-color — задает цвет правого бордюра;
- border-right-style — задает стиль отображения правого бордюра;
- border-right-width — задает ширину правого бордюра;
- border-spacing — устанавливает расстояние между границами ячеек в таблице;
- border-style – задает стиль отображения бордюра, значения: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit;
- border-top — управляет отображением только верхнего бордюра;
- border-top-color — задает цвет верхнего бордюра;
- border-top-left-radius — задает радиус скругления верхнего левого угла бордюра;
- border-top-right-radius — задает радиус скругления верхнего правого угла бордюра;
- border-top-style — задает стиль отображения верхнего бордюра;
- border-top-width — задает ширину верхнего бордюра;
- border-width – задает ширину бордюра.
Как видно, список свойств достаточно большой, но можно пользоваться данным справочником, чтобы знать, как правильно применять данные свойства при разработке.