Одним из занятных приложений свойства CSS3 box-shadow является создание двойной рамки вокруг элемента. Очень интересный эффект для оформления страниц, Но работать он будет только в новых версиях браузеров, которые поддерживают box-shadow .
Однако существует еще несколько методов для создания такого эффекта. Причем очевидное использование фонового изображения является весьма далеким от идеала.
В данном уроке представлены пять методов для создания двойной рамки вокруг элемента. Причем только один из них требует изображение, а все остальные используют чистый код CSS с отличной поддержкой в браузерах.
Метод 1: border и outline
Данный метод работает только в тех браузерах, которые поддерживают свойство outline (все, кроме IE6/7). Вы добавляете элементу оба свойства border и outline .
One { border: solid 6px #fff; outline: solid 6px #888; }
Причина по которой данный метод работает заключается в том, что рамка outline всегда выводится с внешней стороны прямоугольника. Проблема свойства outline проявляется при использовании плавающих элементов, так как рамка перекрывается с соседними элементами.
Метод 2: псевдо элемент
Данный метод требует абсолютного позиционирования рамки:
Two { border: solid 6px #fff; position: relative; z-index: 1; } .two:before { content: ""; display: block; position: absolute; top: -12px; left: -12px; border: solid 6px #888; width: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10; }
Ключевыми моментами являются установка свойства z-index (чтобы псевдо элемент перекрывал содержание), позиционирование и значение min-height . Последнее свойство сохраняет эластичность рамки.
Метод 3: тень
Самый лучший метод, так как требуется только одна строчка кода с установками свойства box-shadow .
Three { box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; }
Для появления двойной рамки используются две тени. Они определяются через запятую. Размытие устанавливается в 0. Так как вторая тень перекрывается первой, то она имеет вдвое большую ширину. Ключевой момент - использование непрозрачных цветов, что создает четкую границу между рамками.
Как и свойство outline , box-shadow не влияет на соседние элементы и может перекрывать их. Поэтому надо установить поле для формирования внешнего вида композиции.
Естественно, поддержка свойства box-shadow ограничена новыми браузерами.
Метод 4: Дополнительный элемент div
В данном методе используется внешний элемент
Four { border: solid 6px #888; background: #fff; width: 312px; min-height: 312px; } .four div { width: 300px; min-height: 300px; background: #222; margin: 6px auto; overflow: hidden; }
Внешний элемент имеет немного больший размер, что создает иллюзию двойной рамки.
Метод 5: свойство border-image
Еще одним новым методом является часто забываемое свойство CSS3 border-image:
Five { border-width: 12px; -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat; -moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat; border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */ }
Знаете другой метод?
Конечно, здесь собраны давно известные и широко используемые методы. Но может быть вам известен какой-нибудь трюк. Поделитесь с читателями в комментариях.
Михаил 2016-06-11 1 HTML и CSS 0
Как делается в css двойная рамка?
Всем привет. А вы знаете, как делать в css двойную рамку? Если нет, то прошу ознакомиться с этой небольшой заметкой. Дело в том, что это не сделаешь с помощью обычного border , тут нужно идти другим путем.
Если вы задаете рамку с помощью свойства border , то можете задать ее только одну. Но очень часто по дизайну может требоваться несколько рамок. В таком случае стоит воспользоваться псевдорамкой — тенью.
Двойная рамка с помощью box-shadow
Вообще если вы хотите подробнее изучить тень в css, то советую вам прочитать на соответствующую тему. В этой статье я не буду подробно объяснять синтаксис свойства, а просто покажу прием, как создать двойную рамку. Итак, создам обыкновенный блок, которому пропишу некоторые стили. Блок может быть любым и с любым содержимым. В моем случае это простой div, поэтому html код я даже не буду показывать. А вот стили:
Div{
background: #E0D8A3;
width: 180px;
height: 110px;
padding: 12px;
}
Ну типичный пример оформления блока.
Теперь создадим двойную рамку с помощью множественных теней. Добавлю в стили к блоку еще такое свойство:
Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;
Вот так это выглядит:
Как видите, получилось достаточно симпатично. В box-shadow всего 5 параметров. Первый — смещение тени по горизонтали, второй — по вертикали. Третий и четвертый параметры — размытие и растяжение. Как видите, первые три мы не трогаем вообще. Размытие нам не нужно, потому что нам нужна резкая тень. Как видите, я прописывал четвертый параметр — растяжение. Он определяет, насколько тень будет больше элемента, к которому привязана.
По умолчанию все выглядит так — тень одинаковых размеров с элементом и лежит четко под ним. Если вы меняете растяжение, то тень начинает выступать за элемент. Именно так можно создавать рамки, абсолютно такие же, как свойством border . Ну а с пятым параметром, я думаю, все понятно — это цвет тени.
Как видите, я просто перечислил параметры для каждой новой тени через запятую. Я думаю, вы уже догадались, что таким же способом можно создать тройную рамку и т.д. Никаких ограничений тут нет. Собственно, как по мне вопрос закрыт, а если у вас есть какие-то вопросы, вы можете писать их в комментарии.
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.
Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок.
Толщина рамки
Толщина рамки определяется свойством border-width , которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:
Цвет рамки
Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .
Типы рамок
Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.
Значения none или hidden могут использоваться, если вы не хотите отображать рамку.
Примеры определения рамок
Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для
, ,
и Результат, может быть, не столь впечатляющ, но он
демонстрирует некоторые возможности:
H1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
Можно также установить специальные свойства для верхнего, нижнего, правого и
левого края рамки. Вот как это делается:
H1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Сокращённая запись
Как и для многих других свойств, вы можете объединить несколько свойств в
одно, используя слово border. Пример:
P {
border-width: 1px;
border-style: solid;
border-color: blue;
}
можно объединить в:
P {
border: 1px solid blue;
}
Резюме
В этом уроке вы познакомились с безграничными возможностями CSS при
использовании рамок.
В следующем уроке мы рассмотрим, как определять размеры в боксовой
модели - height и width.
Свойство CSS
– «border
», позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.
- - толщина линии один пиксель
- - сплошная линия
- - белый цвет
- - чёрный цвет
- - серый цвет
Сплошная граница элемента
Штриховая граница элемента
Пунктирная граница элемента
Граница элемента двойной линией
Свойство отдельных участков границы
Вдавленная рифленая рамка в объёме
Выпуклая рифленая рамка в объёме
Объемная вдавленная рамка
Объемная выпуклая рамка
Уроки / CSS /
Урок 7. Рамка элемента CSS
Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.
border
Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения — цвет, толщину и тип рамки.
Синтаксис у свойства border следующий:
border: Ширина Тип Цвет;
Можно выбрать и другой порядок указания значений свойства, но главное через пробел.
Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.
Ниже представлены ТИПЫ линий
с их названиями:
Как установить рамки у элемента? Делаем следующим образом:
#block {
border:3px solid #0085сс; /* установили линию толщиной 3 пикселя синего цвета */
}
Если Вы хотите установить одну-две-три рамки с определённой стороны
, то указываем так:
border-top
— рамка сверху;
border-bottom
— рамка снизу;
border-left
— рамка слева;
border-right
— рамка справа;
Block {
border-right: 3px solid #0085cc;
border-bottom: 2px dashed #0085cc;
}
Если Вы хотите убрать рамки
элемента в CSS, то пропишите в свойстве border — none
Empty {
border: none; /* у элемента с классом empty не будет рамки */
}
outline
Outline — это свойство, которое нужно для установки внешней рамки элемента.
Есть два отличия от border
:
Во-первых, линия, задаваемая в outline НЕ будет влиять на положение самого блока, его ширину и высоту.
Во-вторых, возможность установки рамки с определённой стороны отсутствует.
Синтаксис тот же, что и border.
outline: 2px dotted #0085cc; /* рамка 2 пикселя пунктиром синяя*/
Для outline, как и для border, убрать рамки можно прописав none:
Спасибо за внимание!
Предыдущая статья
Урок 6.
Границы элемента.
Отступы и поля в CSS. Что такое margin и padding?Следующая статья
Урок 8. Как установить цвет текста и фон элемента в CSS?
Комментарии к статье (vk.com)
border
Поддержка браузерами
12.0+
4.0+
1.0+
1.0+
3.5+
1.0+
Описание
CSS свойство позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.
Значения разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному параметру. Все три значения указывать не обязательно, ширину и/или цвет можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, т.е. если к примеру не указана ширина, то будет использовано значение по умолчанию свойства. В таблице, расположенной под синтаксисом, указано значения каких именно свойств можно использовать.
Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.
Совет: как правило, при использовании рамки требуется добавлять внутренние отступы.
CSS-свойство: border
Они добавляют пустое пространство между рамкой блока и его содержимым: текстом, картинками или дочерними тегами. Обычно граница отображается вплотную к содержимому элемента, это полезно только в том случае, если нужно задать рамку вокруг картинки.
Синтаксис
border: border-width border-style border-color|inherit;
Значения свойства
Пример
Пример Здесь содержится какой-то текст.
Результат данного примера в окне браузера:
Как задать цвет, стиль и размер бордюра в боксах.
В языках разметки бордюр(border
), имеют только таблицы, картинки и фреймы, в некоторых случаях удается задать цвет бордюра и на этом все.
Атрибут border
Каскадные таблицы стилей дают нам больше возможностей, но обо всем по порядку.
В CSS мы можем управлять шириной рамки(бордюра) при помощи border-width
, а если быть точнее то мы можем управлять толщиной каждой стороны отдельно:
border-top-width
— толщина верхнего бордюра
border-right-width
— толщина правого бордюра
border-bottom-width
— толщина нижнего бордюра
border-left-width
— толщина левого бордюра
Но может быть и сокращенная форма:
P{border-width:top right bottom left;}
(верх право низ лево).
Ширина бордюра может задаваться:
цифрами
DIV{border-width:5px}, от ноля до бесконечности, т.е. положительные.
thin
— тонкий бордюр, DIV{border-width:thin}
medium
— средний бордюр, DIV{border-width:medium}
thick
— толстый бордюр, DIV{border-width:thick}
С цифрами понятно, а вот с этими значениями все зависит от браузера, но все же thin <= medium <= thick
.
Так-же мы можем управлять цветом бордюра при помощи border-color
или если быть точнее цветом каждой стороны:
border-top-color
цвет верхнего бордюра;
border-right-color
цвет правого бордюра;
border-bottom-color
цвет нижнего бордюра;
border-left-color
цвет бордюра с левой стороны.
Значение цвета задается как для color
, т.е. одним из 16 цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white или yellow
, также цвета можно задавать: color:#000000
, color:#AF0
, color:rgb(255,0,0)
или color:rgb(100%, 0%, 0%)
.
Не зависимо какую цветовую схему вы выберите, браузеры все равно его переведут в color:rgb(255,0,0)
. Например color:lime
= color:#00ff00
= color:#0F0
= color:rgb(0%, 100%, 0%)
, а для браузера все равно color:rgb(0,255,0)
, т.е. он вычислит это значение.
Если толщиной и цветом бордюра может управлять и HTML то стилем(border-style
) только CSS!!!
Стилем можно управлять каждой стороной отдельно:
border-top-style
стиль верхнего бордюра;
border-right-style
стиль правого бордюра;
border-bottom-style
стиль нижнего бордюра;
border-left-style
стиль бордюра с левой стороны.
Теперь рассмотрим значения ститилей:
1)border-style:none
— Это значение по умолчанию, аналогично border-width:0.
2)border-style:hidden
— Тоже самое, за исключением таблиц(table), которые мы рассмотрим позже.
3)border-style:dotted
— Бордюр из точек.
4)border-style:dashed
— Бордюр из пунктирной линии.
5)border-style:solid
— Бордюр из сплошной линии, т.е. как в HTML.
6)border-style:double
— Бордюр из двойной сплошной линии, здесь нужна толщина(border-width) минимум 3пикселя.
7)border-style:groove
— Бордюр выглядит как вырезанный в канве.
8)border-style:ridge
— Бордюр выглядит как выступающий над канвой.
9)border-style:inset
— Весь бокс выглядит как вдавленный в канву.
10)border-style:outset
— Противоположен предыдущему.
Некоторые браузеры могут игнорировать значения: dotted, dashed, double, groove, ridge, inset и outset и выводит их как solid, т.е. обычным бордюром.
Все конечно это так, но все примеры выше это только принцип работы, а не механизм.
Свойство правила border
подразумевает {border: размер стиль цвет;}, это правило выполняется при наличии всех трех значений и только в такой последовательности, например H1{ border: 5px double red;}
, но могут быть и исключения, если эти значения предусмотрены языками разметки, например для таблицы TABLE{border: 2px}
, т.е. задается только одно значения.
Для того чтобы управлять не всем бордюром, а каждой частью в отдельности существуют правила:
{border-top: размер стиль цвет;}
Управление верхним бордюром;
{border-right: размер стиль цвет;}
Управление бордюром справа;
{border-bottom: размер стиль цвет;}
Управление нижним бордюром;
{border-left: размер стиль цвет;}
Управление бордюром слева.
Эти правила можно использовать как по отдельность так и все вместе.
Исключением есть вот такое правило:
H1{
border: 4px solid green;
}
Дело все в том что в CSS последнее правило имеет самый высокий приоритет, данном случае свойство border содержит в себе border-left и потому правило border-left будет проигнорировано, правильно вот так:
H1{
border: 4px solid green;
border-left: 2px double red;
}
С начала мы устанавливаем правила для всего бордюра, а потом уже для от дельных участков.
По бордюрам для элементов у меня все, разве что некоторые свойства рассмотрим когда доберемся до таблиц и прочих исключений.
CSS: border. Границы элемента.
CSS3 Границы
CSS3 Границы
С помощью CSS3, вы можете создавать закругленные границы, добавлять тень к контейнерам и использовать изображение в качестве границы — без применения дизайнерской программы, наподобие Photoshop.
В этом уроке вы узнаете о следующих свойствах границы:
- border-radius
- box-shadow
- border-image
Поддержка Браузерами
Свойство
Поддержка Браузерами
border-radius
box-shadow
border-image
Internet Explorer 9 поддерживает некоторые из новых свойств границы.
Firefox требует приставки -moz- для border-image.
Chrome и Safari требует приставки -webkit- для border-image.
Opera требует приставки -o- для border-image.
Safari также требует приставки -webkit- для box-shadow.
Opera поддерживает новые свойства границы.
CSS3 Закругленные Углы
Добавление закругленных углов в CSS2 было хитрым. Мы должны были использовать различные изображения для каждого угла.
В CSS3, создание закругленных углов является простым.
В CSS3, свойство border-radius используется для создания закругленных углов:
Этот блок имеет закругленные углы!
CSS3 Тень Контейнера
В CSS3, свойство box-shadow используется для добавления тени к контейнерам:
CSS3 Граница-Изображение
Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:
Свойство border-image позволяет вам указать границу-изображение!
Оригинальное изображение, используемое для создания границы ваше:
Новые Свойства Границы
Атрибут border
Атрибут border
, тега
, применяется для указания толщины рамки вокруг таблицы.
HTML Borders
Допустимо использовать border без значений, тогда толщина рамки будет равна одному пикселю. По умолчанию рамка отображается с трехмерными эффектами, но если дополнительно применить атрибут background, то рамка станет «плоской».
Кроме этого, если атрибут border имеет ненулевое значение, то браузеры показывают и тонкие границы вокруг самих ячеек. Отображением этих границ можно управлять, используя атрибут rules.
Значения
Значением атрибута может быть любое неотрицательное число задающее размер в пикселях.
Значение по умолчанию: 0.
Синтаксис
Обязательный атрибут: нет.
Пример HTML: применение атрибута border
Результат примера
Результат. Применение атрибута 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
- применяется значение родительского элемента
- border-color
- цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)
Примечание
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет".
2. Примеры с различными границами рамок CSS border
2.1. Пример. Разные стили оформления границы рамки border-style
border-style: dashed
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover
и рамку CSS border для создания простых эффектов (например, для меню).
При наведении курсора мыши на блок цвет рамки изменится
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P)
, где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width
: thin | medium | thick | значение
;
- thin
- тонкая толщина линии
- medium
- средняя толщина линии
- thick
- толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border
есть производные свойства для задания односторонних границ у элемента:
- border-top
- для задания рамки сверху (верхняя граница)
- border-bottom
- для задания рамки снизу (нижняя граница)
- border-right
- для задания рамки справа (правая граница)
- border-left
- для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color
- задание цвета верхний границы
- border-top-style
- задание стиля верхней границы
- border-top-width
- задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей:
*/
4.1. Пример. Красивая рамка для выделения цитат
Пример рамки для цитаты
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius
(доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Вот как это выглядит на странице:
Для обращения к border
из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.border
="VALUE
"
Рекомендуем
Как удалять файлы из папки windows
При попытке удалить ту или иную папку привычным способом система может выдать сообщение о том, что удаление в данный момент невозможно. В уведомлении...
-
и
- - толщина линии один пиксель
- - сплошная линия
- - белый цвет
- - чёрный цвет
- - серый цвет
- border-radius
- box-shadow
- border-image
- border-width - толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
- border-style
- стиль выводимой рамки. Может принимать следующие значения
- none или hidden - отменяет границу
- dotted - рамка из точек
- dashed - рамка из тире
- solid - простая линия (применяется чаще всего)
- double - двойная рамка
- groove - рифленая 3D граница
- ridge , inset , outset - различные 3D эффекты рамки
- inherit - применяется значение родительского элемента
- border-color - цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:
H1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }
Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:
H1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }
Сокращённая запись
Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:
P { border-width: 1px; border-style: solid; border-color: blue; }
можно объединить в:
P { border: 1px solid blue; }
Резюме
В этом уроке вы познакомились с безграничными возможностями CSS при использовании рамок.
В следующем уроке мы рассмотрим, как определять размеры в боксовой модели - height и width.
Свойство CSS – «border », позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.
Сплошная граница элемента
Штриховая граница элемента
Пунктирная граница элемента
Граница элемента двойной линией
Свойство отдельных участков границы
Вдавленная рифленая рамка в объёме
Выпуклая рифленая рамка в объёме
Объемная вдавленная рамка
Объемная выпуклая рамка
Уроки / CSS /
Урок 7. Рамка элемента CSS
Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.
border
Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения — цвет, толщину и тип рамки.
Синтаксис у свойства border следующий:
border: Ширина Тип Цвет;
Можно выбрать и другой порядок указания значений свойства, но главное через пробел.
Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.
Ниже представлены ТИПЫ линий с их названиями:
Как установить рамки у элемента? Делаем следующим образом:
#block {
border:3px solid #0085сс; /* установили линию толщиной 3 пикселя синего цвета */
}
Если Вы хотите установить одну-две-три рамки с определённой стороны , то указываем так:
border-top
— рамка сверху;
border-bottom
— рамка снизу;
border-left
— рамка слева;
border-right
— рамка справа;
Block {
border-right: 3px solid #0085cc;
border-bottom: 2px dashed #0085cc;
}
Если Вы хотите убрать рамки элемента в CSS, то пропишите в свойстве border — none
Empty {
border: none; /* у элемента с классом empty не будет рамки */
}
outline
Outline — это свойство, которое нужно для установки внешней рамки элемента.
Есть два отличия от border
:
Во-первых, линия, задаваемая в outline НЕ будет влиять на положение самого блока, его ширину и высоту.
Во-вторых, возможность установки рамки с определённой стороны отсутствует.
Синтаксис тот же, что и border.
outline: 2px dotted #0085cc; /* рамка 2 пикселя пунктиром синяя*/
Для outline, как и для border, убрать рамки можно прописав none:
Спасибо за внимание!
Предыдущая статья
Урок 6.
Границы элемента.
Отступы и поля в CSS. Что такое margin и padding?Следующая статья
Урок 8. Как установить цвет текста и фон элемента в CSS?
Комментарии к статье (vk.com)
border
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.
Значения разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному параметру. Все три значения указывать не обязательно, ширину и/или цвет можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, т.е. если к примеру не указана ширина, то будет использовано значение по умолчанию свойства. В таблице, расположенной под синтаксисом, указано значения каких именно свойств можно использовать.
Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.
Совет: как правило, при использовании рамки требуется добавлять внутренние отступы.
CSS-свойство: border
Они добавляют пустое пространство между рамкой блока и его содержимым: текстом, картинками или дочерними тегами. Обычно граница отображается вплотную к содержимому элемента, это полезно только в том случае, если нужно задать рамку вокруг картинки.
Синтаксис
border: border-width border-style border-color|inherit;
Значения свойства
Пример
Здесь содержится какой-то текст.
Результат данного примера в окне браузера:
Как задать цвет, стиль и размер бордюра в боксах.
В языках разметки бордюр(border ), имеют только таблицы, картинки и фреймы, в некоторых случаях удается задать цвет бордюра и на этом все.
Атрибут border
Каскадные таблицы стилей дают нам больше возможностей, но обо всем по порядку.
В CSS мы можем управлять шириной рамки(бордюра) при помощи border-width
, а если быть точнее то мы можем управлять толщиной каждой стороны отдельно:
border-top-width
— толщина верхнего бордюра
border-right-width
— толщина правого бордюра
border-bottom-width
— толщина нижнего бордюра
border-left-width
— толщина левого бордюра
Но может быть и сокращенная форма:
P{border-width:top right bottom left;}
(верх право низ лево).
Ширина бордюра может задаваться:
цифрами
DIV{border-width:5px}, от ноля до бесконечности, т.е. положительные.
thin
— тонкий бордюр, DIV{border-width:thin}
medium
— средний бордюр, DIV{border-width:medium}
thick
— толстый бордюр, DIV{border-width:thick}
С цифрами понятно, а вот с этими значениями все зависит от браузера, но все же thin <= medium <= thick
.
Так-же мы можем управлять цветом бордюра при помощи border-color
или если быть точнее цветом каждой стороны:
border-top-color
цвет верхнего бордюра;
border-right-color
цвет правого бордюра;
border-bottom-color
цвет нижнего бордюра;
border-left-color
цвет бордюра с левой стороны.
Значение цвета задается как для color
, т.е. одним из 16 цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white или yellow
, также цвета можно задавать: color:#000000
, color:#AF0
, color:rgb(255,0,0)
или color:rgb(100%, 0%, 0%)
.
Не зависимо какую цветовую схему вы выберите, браузеры все равно его переведут в color:rgb(255,0,0)
. Например color:lime
= color:#00ff00
= color:#0F0
= color:rgb(0%, 100%, 0%)
, а для браузера все равно color:rgb(0,255,0)
, т.е. он вычислит это значение.
Если толщиной и цветом бордюра может управлять и HTML то стилем(border-style
) только CSS!!!
Стилем можно управлять каждой стороной отдельно:
border-top-style
стиль верхнего бордюра;
border-right-style
стиль правого бордюра;
border-bottom-style
стиль нижнего бордюра;
border-left-style
стиль бордюра с левой стороны.
Теперь рассмотрим значения ститилей:
1)border-style:none
— Это значение по умолчанию, аналогично border-width:0.
2)border-style:hidden
— Тоже самое, за исключением таблиц(table), которые мы рассмотрим позже.
3)border-style:dotted
— Бордюр из точек.
4)border-style:dashed
— Бордюр из пунктирной линии.
5)border-style:solid
— Бордюр из сплошной линии, т.е. как в HTML.
6)border-style:double
— Бордюр из двойной сплошной линии, здесь нужна толщина(border-width) минимум 3пикселя.
7)border-style:groove
— Бордюр выглядит как вырезанный в канве.
8)border-style:ridge
— Бордюр выглядит как выступающий над канвой.
9)border-style:inset
— Весь бокс выглядит как вдавленный в канву.
10)border-style:outset
— Противоположен предыдущему.
Некоторые браузеры могут игнорировать значения: dotted, dashed, double, groove, ridge, inset и outset и выводит их как solid, т.е. обычным бордюром.
Все конечно это так, но все примеры выше это только принцип работы, а не механизм.
Свойство правила border
подразумевает {border: размер стиль цвет;}, это правило выполняется при наличии всех трех значений и только в такой последовательности, например H1{ border: 5px double red;}
, но могут быть и исключения, если эти значения предусмотрены языками разметки, например для таблицы TABLE{border: 2px}
, т.е. задается только одно значения.
Для того чтобы управлять не всем бордюром, а каждой частью в отдельности существуют правила:
{border-top: размер стиль цвет;}
Управление верхним бордюром;
{border-right: размер стиль цвет;}
Управление бордюром справа;
{border-bottom: размер стиль цвет;}
Управление нижним бордюром;
{border-left: размер стиль цвет;}
Управление бордюром слева.
Эти правила можно использовать как по отдельность так и все вместе.
Исключением есть вот такое правило:
H1{
border: 4px solid green;
}
Дело все в том что в CSS последнее правило имеет самый высокий приоритет, данном случае свойство border содержит в себе border-left и потому правило border-left будет проигнорировано, правильно вот так:
H1{
border: 4px solid green;
border-left: 2px double red;
}
С начала мы устанавливаем правила для всего бордюра, а потом уже для от дельных участков.
По бордюрам для элементов у меня все, разве что некоторые свойства рассмотрим когда доберемся до таблиц и прочих исключений.
CSS: border. Границы элемента.
CSS3 Границы
CSS3 Границы
С помощью CSS3, вы можете создавать закругленные границы, добавлять тень к контейнерам и использовать изображение в качестве границы — без применения дизайнерской программы, наподобие Photoshop.
В этом уроке вы узнаете о следующих свойствах границы:
Поддержка Браузерами
| Свойство | Поддержка Браузерами |
|---|---|
| border-radius | |
| box-shadow | |
| border-image |
Internet Explorer 9 поддерживает некоторые из новых свойств границы.
Firefox требует приставки -moz- для border-image.
Chrome и Safari требует приставки -webkit- для border-image.
Opera требует приставки -o- для border-image.
Safari также требует приставки -webkit- для box-shadow.
Opera поддерживает новые свойства границы.
CSS3 Закругленные Углы
Добавление закругленных углов в CSS2 было хитрым. Мы должны были использовать различные изображения для каждого угла.
В CSS3, создание закругленных углов является простым.
В CSS3, свойство border-radius используется для создания закругленных углов:
Этот блок имеет закругленные углы!
CSS3 Тень Контейнера
В CSS3, свойство box-shadow используется для добавления тени к контейнерам:
CSS3 Граница-Изображение
Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:
Свойство border-image позволяет вам указать границу-изображение!
Оригинальное изображение, используемое для создания границы ваше:
Новые Свойства Границы
Атрибут border
Атрибут border , тега
