border-color
Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
Синтаксис
border-color: [цвет | transparent] | inherit
Значения
transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.
| Число значений | Результат |
|---|---|
| 1 | Цвет границы будет установлен для всех сторон элемента. |
| 2 | Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой. |
| 3 | Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы. |
| 4 | Поочередно устанавливается цвет верхней, правой, нижней и левой границы. |
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
border-color Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан на рис. 1.
Рис. 1. Использование свойства border-color
Объектная модель
[window.]document.getElementById(» elementID «).style.borderColor
Браузеры
Internet Explorer 6 не поддерживает значение transparent . Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit .
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove , ridge , inset или outset .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
CSS по категориям
Поля
Анимация
Градиент
Скруглённые уголки
Изображения
Псевдоэлементы
Псевдоклассы
Печать
Контент
Интерфейс
Таблица
Отступы
Список
Текст
Шрифт
Форматирование
Размеры
Позиционирование
Границы
Цвет и фон
Селекторы
- Селекторы тегов
- Идентификаторы
- Классы
- Мультиклассы
- Универсальный селектор
- Вложенные селекторы
- Дочерние селекторы
- Соседние селекторы
- Родственные селекторы
- Селекторы атрибутов
- [атрибут=»значение»]
- [атрибут^=»значение»]
- [атрибут$=»значение»]
- [атрибут*=»значение»]
- [атрибут~=»значение»]
- [атрибут|=»значение»]
Прозрачная рамка на CSS
Добрый день уважаемые друзья, сегодня Вашему вниманию будет предложено рассмотреть реализацию прозрачной рамки на CSS. Данная задача решается довольно просто при помощи языка CSS3. Структура будет самой примитивной и состоять из блока, в котором будет находиться текст, а именно заголовок, для того чтобы нам не пришлось устанавливать размер шрифта для абзаца, если бы мы выбрали в качестве использования его. Давайте приступим:
Прозрачная рамка
Теперь преобразуем все к нужному виду, и применим некоторые стили:
body <
background : #f00;
>
. border <
background-color : #fff;
background-clip : padding-box;
border : 15px solid rgba(0, 0, 0, 0.3);
border-radius : 30px;
margin : 20px auto;
padding : 10px;
text-align : center;
width : 220px;
>
Вот мы и завершили реализацию прозрачной рамки на CSS, осталось лишь прокомментировать данный код.
Задаем красный цвет фона для всего окна браузера, чтобы мы смогли в дальнейшем увидеть, что рамка действительно является прозрачной. Для самого блока мы задаем белый фоновый цвет, рамку черного цвета, с прозрачностью в формате rgba, и указываем радиус закругления углов у данной рамки.
При помощи свойства backround-clip, которое позволяет указывать, как будет выводиться наш фон, относительно границ элемента. Указав значение padding-box, мы его можем растолковать как отображение фона внутри границ. И благодаря данному свойству, мы получаем наш результат.
Осталось лишь добавить, что также мы выравниваем наш блок по центру экрана с некоторыми отступами, текст размещаем по центру, задав при этом фиксированную ширину для блока. В результате у Вас должно получиться следующее:
Вот мы и разобрались с данной темой, хотелось бы лишь одного, чтобы данная информация смогла быть для Вас полезной в дальнейшем. На этом я с Вами прощаюсь, до скорых встреч!
5 последних свежих статей:
Методы alert, prompt, confirm в JavaScript
И снова я приветствую Вас в очередной теме посвященной языку JavaScript, в которой мы разберем методы alert, prompt, confrim.
Конструкция switch-case в JavaScript
Всем привет, сегодня мы рассмотрим с Вами конструкцию switch-case в языке JavaScript.
Всплывающая подсказка на CSS
Здравствуйте дорогие друзья, сегодня мы с Вами изучим еще одну тему посвященную языку CSS. И научимся реализовывать всплывающие подсказки на CSS.
Псевдокласс target в CSS
Сегодня мы рассмотрим еще одну возможность, которую предоставляет нам CSS3, а именно поговорим о псевдоклассе target, для чего он нам может быть нужен, и рассмотрим один из самых популярных способов его применения.
Как вставить видео с YouTube
Довольно часто Вы видите на различных ресурсах видео, которое хранится на сервисе youtube, но каким-то образом его можно воспроизвести на данном сайте. Об этом сегодня пойдет речь, и я расскажу Вам, как вставить видео с YouTube.
Прозрачная обводка (border)
Всем привет. Верстаю сайт. Создаю веб-дизайн для сайта и столкнулся с такой проблемой, что необходимо сделать прозрачную обводку border div блока. Такой вариант нужен, так как фон динамичный и обводка блоков должна подходить под фон. Первое, что пришло в голову, это сделать новый блок под основным блоком, ему задать background-image картинку png формата с прозрачностью 50%. нижний блок сделать шире и выше на 2 пх. После с помощью margin-top: -1px; margin-left: -1px; сместить нижний блок. Вариант работающий. Но при помощи resize браузера происходят баги — смещение нижнего блога в произвольную сторону. Так же, мне кажется, этот метод довольно не удобный. Как можно реализовать прозрачную обводку. Заранее спасибо.
Отслеживать
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
задан 29 мар 2012 в 15:38
967 5 5 золотых знаков 23 23 серебряных знака 54 54 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
.roundedBox
Отслеживать
ответ дан 29 мар 2012 в 15:53
3,049 27 27 серебряных знаков 48 48 бронзовых знаков
Спасибо, конечно. Но сделал альтернативный и РАБОТАЮЩИЙ вариант: box-shadow: 0 0 1px rgba(0, 0, 0, 0.80);
Полупрозрачные рамки
Изучаю книгу Секреты CSS. Здесь — заметки, jsFiddles и ссылки из книги.
В первом секрете — Полупрозрачные рамки — попался не совсем знакомый hsla формат цвета.
Ликбез: формат hsla принимает 4 значения: hue, saturation, lighness, alpha.
- Hue — цвет, задается в градусах по цветовому кругу (см рисунок). Например, 0 или 360 — это красный, 120 — зеленый, 240 — голубой.
- Saturation — насыщенность — задается в процентах, 100% — полный цвет, 0% — отсутствие цвета, т.е. оттенок серого.
- Lighness — яркость; 0% — черный, 100% — белый.
- Прозрачность — значение от 0 до 1. 0 — полностью прозрачен, 1 — полностью непрозрачен.
Задача: есть белый прямоугольник на красном фоне, надо задать ему белую полупрозрачную рамку.
Ключевые слова здесь: белый и белую. Потому что если прямоугольник синий, а рамку мы хотим белую, выглядеть будет все немного не так.
Итого: я сверстала jsFiddle:
.outer position: absolute;
width: 200px;
height: 200px;
background-color: red;
>.inner <
position: relative;
box-sizing: border-box;
top: 50%;
left: 50%;
margin: -25% 0 0 -25%;
width: 50%;
height: 50%;
background-color: white;
>
Получился результат (еще без рамки):
Теперь попытаюсь добавить белую и желтую полупрозрачную рамку:
.transparent-border border: 10px solid hsla(0, 0%, 100%, .5);
>.transparent-border border: 10px solid hsla(45, 100%, 50%, .5);
>
Эти две рамки помогают понять что происходит. Мы видим на примере справа, что рамка есть, и она даже полупрозрачная, но накладывается она на белый непрозрачный фон.
На примере слева происходит то же самое: прозрачная белая рамка накладывается на непрозрачный белый фон, и ее не видно.
Почему это происходит? Вот объяснение от Леа Веру.
По умолчанию фон растягивается также и на область рамки (если сделать рамку dashed — это очень хорошо видно):
Изменить это поведение можно стало с появлением стандарта Backgrounds & Borders Level 3, через свойство background-clip.
Изменив значение на padding-box мы переопределяем дефолтное поведение и получаем полупрозрачную белую рамку на красном фоне.
.transparent-border background-clip: padding-box;
border: 10px solid hsla(0, 0%, 110%, .5);
>
Ссылка на фиддл Леа Веру: