Внутренняя граница в CSS. Как это сделать?
Недавно необходимо было сделать внутреннюю границу для div’a. Решил использовать стандартное значение inset для свойства border, однако оно не сработало. Тогда начал искать другое решение.
Найденное решение оказалось очень простым и сложным. Сложность его в том, чтобы к нему прийти, а легкость… Легкость в его реализации. Это к слову о том, что HTML и CSS можно выучить за неделю, но уметь с ним работать, на это надо годы практики.
Теперь о самом решении. Поскольку конструкция.border-inset {
border: 1px red solid inset;
}
Не сработала, я нашел простое решение. Для того, чтобы сделать внутреннюю границу мы будем использовать другой подход, а именно: использовать box-shadow.
Следующий код сделает нам внутреннюю черную границу у элемента:
.border-inset {
box-shadow: 1px 1px 0 #000 inset, -1px -1px 0 #000 inset;
}
Поясню как это работает: свойство box-shadow задает тень для элемента. У него есть несколько значений, которыми мы можем управлять, а именно: сместить тень по горизонтали, по вертикали, размыть тень, растянуть тень и задать цвет тени.
Само по себе свойство box-shadow позволяет нам использовать несколько наборов параметров через запятую, что мы и сделали.
Если говорить простым языком, мы сначала сместили тень на 1px по горизонтали и на 1px по вертикали, установили степень размытия 0, задали цвет #000 (черный) и указали, что тень будет внутри нашего элемента (inset). Степень размытия у нас 0, поэтому тень будет в 1px (без размытия). Таким образом мы указали левую и верхнюю границы. Затем мы добавили еще один набор значений (с отрицательными значениями), чтобы добавить правую и нижнюю границы.
Вот и все, таким простым способом мы сделали внутреннюю границу у элемента. Применять можно как к простому div’у, так и любому другому элементу, включая изображения. Вот, кстати, еще один из способов применения тени. Здесь я верстал обычную ссылку <a>, но не совсем стандартного вида.
www.la2q.com
border | CSS — Примеры
Генератор border
CSS
Cвойство border (w3.org) позволяет установить толщину, стиль и цвет границы элемента.nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset | ||
nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset | стиль | nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset |
nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset |
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: теория, конвертер.
<div></div>
Один блок находится внутри другого. Сквозь полупрозрачную границу нужно увидеть фон родителя. Если у потомка есть свой собственный фон, то требуется его (фон дочернего элемента) убрать с границы обводки блока.
<div></div>
Чтобы у изображения были полупрозрачные края, сквозь которые просвечивала эта же картинка, а не фон родителя, лучше применить outline
.
<img alt="голубой фон в смайликах" src="http://2.bp.blogspot.com//-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg">
Внутренний border
. Управление длиной блока
Если задано width: auto;
, то ширина элемента равна ширине родителя. Она не увеличивается за счёт margin
, border
и padding
.
width: auto; (по умолчанию)
width: 100%;
В остальных случаях 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:
какой-то текст
<div>какой-то текст</div>
Рамка в процентах
Ширина рамки border-width
может устанавливаться в любых единицах измерения, но не в процентах, также как и box-shadow
, и outline
. Для однотонных линий можно использовать
. Из-за того, что не хочется лишаться padding
, нужен ещё и :after
:
резиновый border
<div>какой-то текст</div>
Вдавленная линия CSS
Эффект вдавленной линии достигается когда верхняя полоса темнее, нижняя — светлее; выпуклой наоборот.
<hr>
shpargalkablog.ru
Рамка блока в CSS
Создание рамки блока
У блока может быть рамка. Она обозначает границы блока. При этом внутренний отступ, находится внутри блока, то есть внутри рамки, а внешний отступ снаружи рамки. Рамка занимает своё место на странице и не входит ни во внешний отступ, ни во внутренний. Для создания рамки нужно указать три свойства: ширину рамки, стиль рамки и цвет.
Для указания ширины рамки используется свойство border-width. Оно может принимать следующие значения:
border-width: medium — средняя (по умолчанию)
border-width: thin — тонкая
border-width: thick — толстая
border-width: ширина в единицах измерения CSS
border-width: inherit — значение принимается от родительского элемента
Чаще всего ширину указывают в каких-либо единицах измерения, существующих в CSS.
Стиль рамки устанавливается с помощью свойства border-style. В зависимости от этого свойства рамки выгдядят по-разному. Далее приведены значения этого свойства и стили, которые они устанавливают.
solid | dotted | dashed | double | inset | outset | groove | ridge |
При маленькой ширине рамка может выглядеть несколько по-другому.
Кроме указанных значений, свойство border-style может принимать следующие значения:
border-style: none — отсутствие рамки
border-style: hidden — то же, что и none, применяется к ячейке таблицы
border-style: inherit — значение принимается от родительского элемента
Цвет рамки устанавливает свойство border-color. Значением свойства является цвет, указанный одним из способов, существующих в CSS.
Создадим блок и зададим ему рамку.
Стиль:
+
1 | <!DOCTYPE html> <html> <head> <title>Страница</title> <meta charset="utf-8"> <style> |
7 | #div1 { border-width: 1px; border-style: solid; border-color: Red; } |
HTML код:
16 | <div>Блок с рамкой</div> |
Попробуйте задать блоку рамку с другими значениями свойств.
Сокращённая запись
Рамку можно создать более коротким способом. Для этого существует свойство border, в котором через пробел перечисляются свойства рамки, сначала ширина, затем стиль, затем цвет. Для примера создадим блок с такой же рамкой, но установим её с помощью сокращённой записи.
17 | <div>Блок с рамкой</div> |
Если не указать ширину или цвет, то будет использовано значение по умолчанию.
Отдельные стороны рамки
Рамку блоку можно задать не целиком, а с каждой стороны по-отдельности. У разных сторон рамки может быть отдельный стиль, с одной стороны может быть рамка, а с другой может её не быть, вобщем у Вас есть полная свобода действий.
Для создания рамки с каждой из сторон соществуют свойства border-left, border-right, border-top, border-bottom. Для примера создадим блок, у которого есть рамка только слева.
18 | <div>Блок<br>с рамкой<br>слева</div> |
Создайте рамку у этого блока с других сторон с разным видом.
Для любой стороны рамки можно указать каждое свойство отдельно:
border-left-width, border-left-style, border-left-color
border-right-width, border-right-style, border-right-color
border-top-width, border-top-style, border-top-color
border-bottom-width, border-bottom-style, border-bottom-color
Если нужно, чтобы рамка отображалась со всех сторон по-разному, можно любому из свойств рамки задать не одно значение, а четыре, для каждой из сторон. Значения перечисляются через пробел, сначала для верхней части, затем для правой, затем для нижней, а затем для левой.
Для примера создадим блок, у которого рамка имеет со всех сторон разную ширину.
Стиль:
13 | #div2 { border-width: 5px 2px 3px 7px; border-style: solid; border-color: #D118CB; } |
HTML код:
25 | <div>Блок с рамкой с разной шириной</div> |
Свойству также можно указать два или три значения. Если указано два значения, то первое значение указывается для верхней и нижней части рамки, а второе для левой и правой. Если указано три значения, то первое значение указывается для верхней части рамки, второе значение для левой и правой части, а третье для нижней части.
basecourse.ru
CSS-рамка
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.
Оформление рамок и границ HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
border-style (border-top-style, border-right-style, border-bottom-style, border-left-style) | |
---|---|
Значения: | |
none | Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства. |
hidden | Эквивалентно none. |
dotted | dotted |
dashed | dashed |
solid | solid |
double | double |
groove | groove |
ridge | ridge |
inset | inset |
outset | outset |
{1,4} | Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style: |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-style: solid;}
p {border-top-style: solid;}
2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
border-color (border-top-color, border-right-color, border-bottom-color, border-left-color) | |
---|---|
Значения: | |
transparent | Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента. |
цвет | Цвет рамок задается при помощи значений свойства color.{border-color: #cacd58;} |
{1,4} | Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color: |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-color: #cacd58;}
3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
border-width (border-top-width, border-right-width, border-bottom-width, border-left-width) | |
---|---|
Значения: | |
thin / medium / thick | Ключевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium |
width (px, em) | {border-width: 5px;} |
{1,4} | Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width: |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-width: 2px;}
4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:
div {
width: 100px;
height: 100px;
border: 2px solid grey;
}
При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.
Синтаксис
p {border-top: 2px solid grey;}
html5book.ru
border | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Значение по умолчанию | Зависит от использования |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
Синтаксис
border: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
<style>
.brd {
border: 4px double black; /* Параметры границы */
background: #fc3; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
[window.]document.getElementById(«elementID»).style.border
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
htmlbook.ru
border-bottom-style | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Устанавливает стиль границы внизу элемента.
Синтаксис
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
Значения
- none
- Линия не отображается и значение ее толщины обнуляется.
- hidden
- Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
- dotted
- Линия состоящая из набора точек.
- dashed
- Пунктирная линия, состоящая из серии коротких отрезков.
- solid
- Сплошная линия.
- double
- Двойная линия.
- groove
- Создает эффект вдавленной линии.
- ridge
- Создает эффект рельефной линии.
- inset
- Псевдотрехмерная линия.
- outset
- Псевдотрехмерная линия.
- inherit
- Наследует значение родителя.
Вид указанных стилей представлен на рис. 1.
Рис.1. Стили границ
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-bottom-style</title>
<style>
#panel {
background: #ccc; /* Цвет фона */
}
#panel p {
padding: 5px; /* Добавляем поля */
margin: 0; /* Убираем отступы у параграфа */
}
#title {
background: navy; /* Цвет фона */
color: white; /* Цвет текста */
border-bottom-width: 2px; /* Толщина линии внизу */
border-bottom-style: solid; /* Стиль линии внизу */
border-bottom-color: white; /* Цвет линии внизу */
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства border-bottom-style
Объектная модель
[window.]document.getElementById(«elementID»).style.borderBottomStyle
Браузеры
Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
htmlbook.ru
border — граница блока | CSS справочник
Поддержка браузерами
12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
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 | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style type="text/css"> p { border: 5px solid red; } </style> </head> <body> <p>Здесь содержится какой-то текст.</p> </body> </html>
Результат данного примера в окне браузера:
puzzleweb.ru