Border css прозрачный: html — Прозрачная обводка (border) – Как сделать частично прозрачный border? — Хабр Q&A

radius, color, style и другие css свойства border

В предыдущей статье мы с Вами рассмотрели применение CSS свойств границы () элементов страницы. И я обещал Вам, что расскажу о том, как использовать для прорисовки границ — картинки. Об этом и пойдет сегодня речь.

Чтобы использовать изображения для построения границ будем использовать CSS cвойство border-image.

Толщина границ задается свойством , при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Синтаксис кода

Давайте разберем пример записи свойства:

border-image: url (images/bg-image.png ) 30 round round;

url (images/bg-image.png) — адрес фоновой картинки.

30 — может быть одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах, задавая тем самым области деления картинки. Сами единицы не пишутся, только число (10, а не 10px). На рисунке красными линиями выделены необходимые для создания рамки области.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в таблице.

round round — два параметра (для горизонтальных и вертикальных границ соответственно). Могут принимать одно из трех значений. Результат можно увидеть на картинках.

stretch — Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat — Повторяет рисунок границы.
round — Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Совместимость с браузерами

К сожалению, не все версии браузеров поддерживают свойство border-image. Для лучшей совместимости желательно прописать свойство для всех браузеров.

Пример кода:

border-style : solid ; border-width : 27px ; -moz-border-image: url (http://mysite.ru/border.png ) 27 round stretch; -webkit-border-image: url (http://mysite.ru/border.png ) 27 round stretch; -o-border-image: url (http://mysite.ru/border.png ) 27 round stretch; border-image: url (http://mysite.ru/border.png ) 27 round stretch;

Автоматизация

В сети есть инструменты, которые оказывают нам помощь в написании кода. Для свойства border-image есть очень удобный конструктор . Вы просто загружаете туда свою картинку границы (кстати, их очень много можно найти в инете). При помощи ползунков делите картинку на области, задаете толщину границ и параметры повторения.

Причем, сразу же, в онлайн режиме видите результат (то, что получится в итоге).

Когда добиваетесь неодходимого результата, Вам остается только скопировать сгенерированный код и вставить его в код страницы (файла css).

Очень просто и удобно.

Заключение

На этом мы заканчиваем рассмотрение свойств границ в CSS. Я с Вами не прощаюсь. В ближайшее время мы продолжим обучение верстке. Подписывайтесь на обновления ... и... До встречи!

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

Краткая информация

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. {1,4}
# Повторять один или больше раз через запятую. #
×

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

border

Познание текста, не учитывая количества слогов, стоящих между ударениями, дает ямб. Эти слова совершенно справедливы, однако генеративная поэтика аннигилирует урбанистический скрытый смысл.

В данном примере вокруг блока добавляется двойная граница. Результат показан на

Свойство border-color | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-color устанавливает цвет для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений.

Поддержка браузерами

Internet Explorer 6 (и более ранние версии) не поддерживает значение свойства "transparent".

CSS синтаксис:

border-color:"color | transparent | initial | inherit";

JavaScript синтаксис:

object.style.borderColor = "orange"

Значения свойства

ЗначениеОписание
colorЗадает цвет границ. По умолчанию - черный цвет.
transparentУказывает, что цвет границы должен быть прозрачным. IE6 (и более ранние версии) не поддерживает данное значение.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

Для запоминания порядка расстановки цветов в одном объявлении можно использовать английское слово TRouBLe(где T - top, R - right, B - bottom, L -left). По такому же принципу задаются отступы и поля в свойствах padding и margin.

<!DOCTYPE html>
<html>
<head>
<title>Ширина границ.</title>
<style> 
.primer1 {
border:10px solid; /* задаём сплошную границу шириной 10px для всех сторон */
border-color : red green blue yellow; /* задаём цвета для границ Top-Right-Bottom-Left  */
text-align: center; /* задаём выравнивание текста по центру */
width: 150px; /* задаём ширину блока */
}
.primer2
{ border:10px solid; /* задаём сплошную границу шириной 10px для всех сторон */ border-color : red green blue; /* задаём цвета для границ Top-Right&Left-Bottom */ text-align: center; /* задаём выравнивание текста по центру */ width: 150px; /* задаём ширину блока */ } .primer3 { border:10px solid; /* задаём сплошную границу шириной 10px для всех сторон */ border-color : red green; /* задаём цвета для границ Top&Bottom-Right&Left */ text-align: center; /* задаём выравнивание текста по центру */ width: 150px; /* задаём ширину блока */ } .primer4 { border:10px solid; /* задаём сплошную границу шириной 10px для всех сторон */ border-color : red; /* задаём цвет для всех границ красный Top&Right&Bottom&Left */ text-align: center; /* задаём выравнивание текста по центру */ width: 150px; /* задаём ширину блока */ } </style> </head> <body> <p class = "primer1">border-color: red green blue yellow;</p> <p class = "primer2">border-color: red green blue;</p> <p class = "primer3">border-color: red green;</p> <p class = "primer4">border-color: red;</p> </body> </html>
Пример указания цвета границ.CSS свойства

CSS свойство border-color

Это свойство определяет цвет всех четырех сторон рамки HTML элемента. Свойство border-color может принимать от одного до четырех значений.

Например:

  • border-color: red green blue pink;
    • верхняя сторона рамки красная (red)
    • правая сторона рамки зеленая (green)
    • нижняя сторона рамки синяя (blue)
    • левая сторона рамки розовая (pink)
  • border-color: red green blue;
    • верхняя сторона рамки красная (red)
    • правая и левая стороны рамки зеленые (green)
    • нижняя сторона рамки синяя (blue)
  • border-color: red green;
    • верхняя и нижняя стороны рамки красные (red)
    • правая и левая стороны рамки зеленые (green)
  • border-color: red;
    • все четыре стороны рамки красные (red)

Внимание

: Следует всегда определять свойство border-style перед свойством border-color. Элемент должен иметь рамку, прежде чем менять ее цвет.

CSS синтаксис

border-color: цвет | transparent | initial | inherit;

Возможные значения

Значение Описание
цвет Устанавливает цвет рамки (см. Как использовать цвета).
transparent Значение по умолчанию. Устанавливает, что цвет рамки должен быть прозрачным.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем цвет для четырех сторон рамки параграфа


p {
     border-style: solid;
     border-color: #ff0000 #0000ff;
}

seodon.ru | CSS справочник - border-color

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

Свойство CSS border-color используется для указания разного цвета для каждой стороны рамки элемента.

Если цвет рамки со всех сторон одинаковый, то можно использовать свойство CSS border.

Тип свойства

Назначение: рамки.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства CSS border-color является указание цвета рамки одним из следующих способов:

  • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
  • transparent — прозрачный цвет, поэтому сквозь него просвечивает фон родительского элемента.
  • inherit — наследует значение CSS border-color от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: совпадает с цветом текста элемента (CSS color).

Border-color может иметь от одного до четырех (через пробел) значений цвета, при этом будут соблюдаться эти правила:

  1. Одно значение — цвет рамки со всех сторон одинаковый.
  2. Два значения — первое задает цвет верхней и нижней границы, а второе — левой и правой.
  3. Три значения — первое указывает цвет верхней границы, второе — левой и правой, третье — нижней границы рамки.
  4. Четыре значения — начиная с верхней границы и по часовой стрелке: для верхней, для правой, для нижней, для левой границы.

Синтаксис

border-color: [цвет | transparent] {1,4} | inherit

Пример CSS: использование border-color

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство border-color</title>
  <style type="text/css">
   h2 {
    border-style: solid; /* стиль рамки заголовка */
    border-color: green red; /* цвет сторон рамки */
    padding: 3px; /* внутренние отступы */
   }
   p {
    border-style: dotted;
    border-color: red transparent blue;
   }
  </style>
 </head>
 <body>
  <h2>Заголовок</h2>
  <p>Параграф текста.</p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS border-color.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit. При значении transparent IE6 не делает рамку прозрачной, а окрашивает ее в серый цвет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *