Как поменять цвет border css
Перейти к содержимому

Как поменять цвет border css

  • автор:

border-color¶

Свойство border-color устанавливает цвет границы на разных сторонах элемента.

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

Демо¶

Каждую сторону можно установить по отдельности, используя border-top-color , border-right-color , border-bottom-color и border-left-color ; или с использованием режима записи border-block-start-color , border-block-end-color , border-inline-start-color и border-inline-end-color .

Это свойство является сокращением для следующих свойств CSS:

  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • 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-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
/* values */ border-color: red; /* top and bottom | left and right */ border-color: red #f015ca; /* top | left and right | bottom */ border-color: red rgb(240, 30, 50, 0.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* Global values */ border-color: inherit; border-color: initial; border-color: revert; border-color: revert-layer; border-color: unset; 

Значения¶

Устанавливает прозрачный цвет.

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

Табл. 1. Изменение цвета в зависимости от числа значений

Число значений Результат
1 Цвет границы будет установлен для всех сторон элемента.
2 Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3 Первое значение задаёт цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Значение по-умолчанию: Значение свойства color

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

Спецификации¶

  • CSS Backgrounds and Borders Module Level 3
  • CSS Logical Properties and Values Level 1
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
 html> head> meta charset="utf-8" /> title>border-colortitle> style> h1  border-color: red white; /* Цвет границы */ border-style: solid; /* Стиль границы */ > p  border-color: #008a77; /* Цвет границы */ border-style: solid; /* Стиль границы */ padding: 5px; /* Поля вокруг текста */ > style> head> body> h1>Шоу-бизнес как внутридискретное арпеджиоh1> p> Септаккорд, согласно традиционным представлениям, иллюстрирует однокомпонентный шоу-бизнес. p> body> html> 

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

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

Сначала необходимо установить свойство border-style или border-bottom-style, так как элемент должен иметь границы, чтобы суметь изменить их цвет.

Цвет нижней границы может быть установлен сокращенным свойством border-color.

Значение по умолчанию currentColor
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да. Цвет border-bottom анимируем.
Версия CSS1
DOM синтаксис object.style.borderBottomColor = «blue»;

Синтаксис

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

Пример

html> html> head> style> h2 < border-bottom-style: solid; border-bottom-color: #1c87c9; border-bottom-width: 5px; > style> head> body> h2> Заголовок с нижней границей solid blue h2> body> html>

Рассмотрим пример, где добавлены цвета к элементам , и , чтобы показать цветовой эффект.

Пример

html> html> head> style> h2 < border-bottom-style: groove; border-bottom-color: #8ebf42; border-bottom-width: 5px; > div < border-style: inset; border-bottom-color: #ccc; border-bottom-width: 8px; > p < border-style: double; border-bottom-color: #1c87c9; border-bottom-width: 8px; > style> head> body> h2>Заголовок с нижней границей groove green. h2> div>div элемент с нижней границей inset gray. div> p>Параграф с границей double blue. p> body> html>

В следующем примере можно применить значение transparent:

Пример

html> html> head> style> div < border: #666 dashed; border-bottom-color: transparent; padding: 8px; > style> head> body> h2>Пример transparent border-bottom-color h2> div>Пример div элемента с transparent border-bottom-color. div> body> html>

Можно применить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства border-right-color .

Рассмотрим пример со значениями hexadecimal, RGB, HSL и названием цвета, установленные для border-bottom-color :

Пример

html> html> head> style> p < border: 5px solid #666; width: 60%; padding: 5px; > .name < border-bottom-color: lightblue; > .hex < border-bottom-color: #1c87c9; > .rgb < border-bottom-color: rgba(0,0,0,0.15); > .hsl < border-bottom-color: hsl(89, 43%, 51%); > style> head> body> p class="name">Нижняя граница с названием цвета. p> p class="hex">Нижняя граница со значением hexadecimal. p> p class="rgb">Нижняя граница со значением RGB color. p> p class="hsl">Нижняя граница со значением HSL color. p> body> html>

Значения

Значение Описание
color Указывает на цвет нижней границы. Цвет по умолчанию — цвет элемента. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). Необходимое значение.
transparent Указывает, что цвет границы должен быть transparent. Нижняя граница может занять место, установленное значением border-width.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

1.0+ 1.0+ 1.0+ 3.5+

Как задать цвет для BORDER в CSS в вариации linear-gradient?

Никак. Используйте блок обвертку и задайте ему фоновым цветом, и добавьте падинги равные вашему размеру бордера.

15 ноя 2022 в 11:27

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

border-right: 2px solid transparent;

border-image: linear-gradient(136.96deg, #EB177E 0%, #893EF9 103.66%); border-image-slice: 1; 

Отслеживать
ответ дан 15 ноя 2022 в 11:51
Kanye East Kanye East
23 5 5 бронзовых знаков

    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Границы

Используйте утилиты для создания границ, чтобы быстро настроить границу и радиус границы элемента. Отлично подходит для изображений, кнопок или любого другого элемента.

На этой странице На этой странице

Граница

Используйте служебные программы для создания границ, чтобы добавить или удалить границы элемента. Выбирайте из всех границ или по одной.

Добавка

Добавьте границы к пользовательским элементам:

span class="border">span> span class="border-top">span> span class="border-end">span> span class="border-bottom">span> span class="border-start">span>

Вычитание

Или удалить границы:

span class="border border-0">span> span class="border border-top-0">span> span class="border border-end-0">span> span class="border border-bottom-0">span> span class="border border-start-0">span>

Цвет

Измените цвет границы с помощью утилит, созданных на основе цветов нашей темы.

span class="border border-primary">span> span class="border border-secondary">span> span class="border border-success">span> span class="border border-danger">span> span class="border border-warning">span> span class="border border-info">span> span class="border border-light">span> span class="border border-dark">span> span class="border border-white">span>

Или измените border-color компонента по умолчанию:

Адрес электронной почты
Опасный заголовок
Изменение цвета и ширины границы

div class="mb-4">  label for="exampleFormControlInput1" class="form-label">Адрес электронной почтыlabel>  input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]"> div>  div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">  Опасный заголовок div>  div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">  Изменение цвета и ширины границы div>

Непрозрачность

Добавлено в версии 5.2.0

Утилиты Bootstrap border- генерируются с помощью Sass с использованием переменных CSS. Это позволяет изменять цвет в реальном времени без компиляции и динамических изменений альфа-прозрачности.

Как это устроено

Рассмотрим нашу стандартную утилиту .border-success .

.border-success   --bs-border-opacity: 1;  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; > 

Мы используем RGB-версию нашей переменной CSS —bs-success (со значением 25, 135, 84 ) и присоединяем вторую переменную CSS, —bs-border-opacity , для альфа-прозрачности. (со значением по умолчанию 1 благодаря локальной переменной CSS). Это означает, что каждый раз, когда вы сейчас используете .border-success , ваше вычисленное значение color равно rgba(25, 135, 84, 1) . Локальная переменная CSS внутри каждого класса .border-* позволяет избежать проблем с наследованием, поэтому вложенные экземпляры утилит не имеют измененной альфа-прозрачности автоматически.

Пример

Чтобы изменить эту непрозрачность, переопределите —bs-border-opacity с помощью пользовательских стилей или встроенных стилей.

Это граница успеха по умолчанию
Это граница успеха с непрозрачностью 50%

div class="border border-success p-2 mb-2">Это граница успеха по умолчаниюdiv> div class="border border-success p-2" style="--bs-border-opacity: .5;">Это граница успеха с непрозрачностью 50%div>

Или выберите любую из утилит .border-opacity :

Это граница успеха по умолчанию
Это граница успеха с непрозрачностью 75%
Это граница успеха с непрозрачностью 50%
Это граница успеха с непрозрачностью 25%
Это граница успеха с непрозрачностью 10%

div class="border border-success p-2 mb-2">Это граница успеха по умолчаниюdiv> div class="border border-success p-2 mb-2 border-opacity-75">Это граница успеха с непрозрачностью 75%div> div class="border border-success p-2 mb-2 border-opacity-50">Это граница успеха с непрозрачностью 50%div> div class="border border-success p-2 mb-2 border-opacity-25">Это граница успеха с непрозрачностью 25%div> div class="border border-success p-2 border-opacity-10">Это граница успеха с непрозрачностью 10%div>

Ширина

span class="border border-1">span> span class="border border-2">span> span class="border border-3">span> span class="border border-4">span> span class="border border-5">span>

Радиус

Добавьте классы к элементу, чтобы легко скруглить его углы.

Пример закругленного изображения

Пример закругленного изображения сверху

Пример закругленного изображения справа

Пример закругленного изображения снизу

Пример закругленного изображения слева

Полностью круглое изображение

Закругленное изображение таблетки

img src=". " class="rounded" alt=". "> img src=". " class="rounded-top" alt=". "> img src=". " class="rounded-end" alt=". "> img src=". " class="rounded-bottom" alt=". "> img src=". " class="rounded-start" alt=". "> img src=". " class="rounded-circle" alt=". "> img src=". " class="rounded-pill" alt=". ">

Размеры

Используйте классы масштабирования для больших или меньших закругленных углов. Размеры варьируются от 0 до 5 и могут быть настроены путем изменения API утилит.

Пример изображения без закруглений

Пример маленького закругленного изображения

Пример закругленного изображения по умолчанию

Пример большого закругленного изображения

Пример увеличенного округлого изображения

Пример очень большого округлого изображения

img src=". " class="rounded-0" alt=". "> img src=". " class="rounded-1" alt=". "> img src=". " class="rounded-2" alt=". "> img src=". " class="rounded-3" alt=". "> img src=". " class="rounded-4" alt=". "> img src=". " class="rounded-5" alt=". ">

CSS

Переменные

Добавлено в версии 5.2.0

 --#border-width: #$border-width>;  --#border-style: #$border-style>;  --#border-color: #$border-color>;  --#border-color-translucent: #$border-color-translucent>;   --#border-radius: #$border-radius>;  --#border-radius-sm: #$border-radius-sm>;  --#border-radius-lg: #$border-radius-lg>;  --#border-radius-xl: #$border-radius-xl>;  --#border-radius-2xl: #$border-radius-2xl>;  --#border-radius-pill: #$border-radius-pill>;  

Sass Переменные

$border-width: 1px; $border-widths: (  1: 1px,  2: 2px,  3: 3px,  4: 4px,  5: 5px );  $border-style: solid; $border-color: $gray-300; $border-color-translucent: rgba($black, .175); 
$border-radius: .375rem; $border-radius-sm: .25rem; $border-radius-lg: .5rem; $border-radius-xl: 1rem; $border-radius-2xl: 2rem; $border-radius-pill: 50rem; 

Sass Миксины

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false)   @if $enable-rounded   border-radius: valid-radius($radius);  >  @else if $fallback-border-radius != false   border-radius: $fallback-border-radius;  > >  @mixin border-top-radius($radius: $border-radius)   @if $enable-rounded   border-top-left-radius: valid-radius($radius);  border-top-right-radius: valid-radius($radius);  > >  @mixin border-end-radius($radius: $border-radius)   @if $enable-rounded   border-top-right-radius: valid-radius($radius);  border-bottom-right-radius: valid-radius($radius);  > >  @mixin border-bottom-radius($radius: $border-radius)   @if $enable-rounded   border-bottom-right-radius: valid-radius($radius);  border-bottom-left-radius: valid-radius($radius);  > >  @mixin border-start-radius($radius: $border-radius)   @if $enable-rounded   border-top-left-radius: valid-radius($radius);  border-bottom-left-radius: valid-radius($radius);  > >  @mixin border-top-start-radius($radius: $border-radius)   @if $enable-rounded   border-top-left-radius: valid-radius($radius);  > >  @mixin border-top-end-radius($radius: $border-radius)   @if $enable-rounded   border-top-right-radius: valid-radius($radius);  > >  @mixin border-bottom-end-radius($radius: $border-radius)   @if $enable-rounded   border-bottom-right-radius: valid-radius($radius);  > >  @mixin border-bottom-start-radius($radius: $border-radius)   @if $enable-rounded   border-bottom-left-radius: valid-radius($radius);  > > 

API утилит

Пограничные утилиты объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.

 "border": (  property: border,  values: (  null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color),  0: 0,  )  ),  "border-top": (  property: border-top,  values: (  null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color),  0: 0,  )  ),  "border-end": (  property: border-right,  class: border-end,  values: (  null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color),  0: 0,  )  ),  "border-bottom": (  property: border-bottom,  values: (  null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color),  0: 0,  )  ),  "border-start": (  property: border-left,  class: border-start,  values: (  null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color),  0: 0,  )  ),  "border-color": (  property: border-color,  class: border,  local-vars: (  "border-opacity": 1  ),  values: $utilities-border-colors  ),  "border-width": (  css-var: true,  css-variable-name: border-width,  class: border,  values: $border-widths  ),  "border-opacity": (  css-var: true,  class: border-opacity,  values: (  10: .1,  25: .25,  50: .5,  75: .75,  100: 1  )  ),  
 "rounded": (  property: border-radius,  class: rounded,  values: (  null: var(--#$prefix>border-radius),  0: 0,  1: var(--#$prefix>border-radius-sm),  2: var(--#$prefix>border-radius),  3: var(--#$prefix>border-radius-lg),  4: var(--#$prefix>border-radius-xl),  5: var(--#$prefix>border-radius-2xl),  circle: 50%,  pill: var(--#$prefix>border-radius-pill)  )  ),  "rounded-top": (  property: border-top-left-radius border-top-right-radius,  class: rounded-top,  values: (null: var(--#$prefix>border-radius))  ),  "rounded-end": (  property: border-top-right-radius border-bottom-right-radius,  class: rounded-end,  values: (null: var(--#$prefix>border-radius))  ),  "rounded-bottom": (  property: border-bottom-right-radius border-bottom-left-radius,  class: rounded-bottom,  values: (null: var(--#$prefix>border-radius))  ),  "rounded-start": (  property: border-bottom-left-radius border-top-left-radius,  class: rounded-start,  values: (null: var(--#$prefix>border-radius))  ),  
  • Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия v5.2.3.

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

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