Как изменить цвет outline

The outline-color CSS property sets the color of an element's outline.

The outline-color CSS property sets the color of an element’s outline.

Try it

Syntax

/* <color> values */
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

/* Keyword value */
outline-color: invert;

/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

The outline-color property is specified as any one of the values listed below.

Values

<color>

The color of the outline, specified as a <color>.

invert

To ensure the outline is visible, performs a color inversion of the background. Note that browsers are not required to support this value; if they don’t, this keyword is considered invalid.

Description

An outline is a line that is drawn around an element, outside the border. Unlike the element’s border, the outline is drawn outside the element’s frame, and may overlap other content. The border, on the other hand, will actually alter the page’s layout to ensure that it fits without overlapping anything else (unless you explicitly set it to overlap).

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

Accessibility concerns

Custom focus styles commonly involve making adjustments to the outline property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

  • WebAIM: Color Contrast Checker
  • MDN Understanding WCAG, Guideline 1.4 explanations
  • Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Formal definition

Initial value invert, for browsers supporting it, currentColor for the other
Applies to all elements
Inherited no
Computed value For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animation type a color

Formal syntax

outline-color = 
  [ <color> | <1d-image> ]  |
  invert                    
<1d-image> = 
  <stripes()>
<stripes()> = 
  stripes( <color-stripe># )
<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?
<length-percentage> = 
  <length>      |
  <percentage>

Examples

Setting a solid blue outline

HTML

<p>My outline is blue, as you can see.</p>

CSS

p {
  outline: 2px solid; /* Set the outline width and style */
  outline-color: #0000ff; /* Make the outline blue */
  margin: 5px;
}

Result

Specifications

Specification
CSS Basic User Interface Module Level 4
# outline-color

Browser compatibility

BCD tables only load in the browser

See also

Источник

Указывает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение.

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

Значение по умолчанию invert
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис

outline-color: invert | <цвет>

Синтаксис

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

Значения

invert
Автоматически задаёт цвет линии, исходя из фона под ней для достижения максимального контраста. Браузеру разрешается игнорировать значение invert и вместо него использовать цвет линии, заданный свойством color.
<цвет>
Задаёт цвет линии в любом допустимом для CSS формате.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
  padding: 10px;
  outline: 4px dotted;
  outline-color: {{ playgroundValue }};
}

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>outline-color</title>
<style>
.block {
outline-style: dashed; /* Пунктирная граница */
outline-color: #be8b5e; /* Цвет границы */
padding: 10px; /* Поля вокруг текста */
background: #eedac8; /* Цвет фона */
}
</style>
</head>
<body>
<div class=»block»>
Воображение, на первый взгляд, начинает конструктивный классицизм.
</div>
</body>
</html>

Результат примера показан на рис. 1.

Использование свойства outline-color

Рис. 1. Использование свойства outline-color

Объектная модель

Объект.style.outlineColor

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

Спецификация Статус
CSS Basic User Interface Module Level 4 Рабочий проект
CSS Basic User Interface Module Level 3 Рекомендация
CSS Level 2 (Revision 1) Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

<цвет> 8 12 1 7 1.2 1.5
invert 9 12
<цвет> 2.1 1 6 3.2
invert

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Рецепты

Источник

CSS-свойство outline позволяет вам определить область контура вокруг элемента.

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

В этом разделе мы разберем, как установить стиль, цвет и ширину контура.

Как разница между Outlines и Borders

Контур (outline) выглядит очень похожим на границу (border), но имеет отличительные особенности:

  • Контуры не занимают места, всегда располагаются над элементом и могут перекрывать другие элементы на странице;
  • В отличие от границ, для контура не получится установить разные цвета или стили для каждой из сторон;
  • Контуры не оказывают никакого влияния на окружающие элементы, кроме наложения;
  • В отличие от границ, контуры не изменяют размер или положение элемента;
  • Контуры могут быть не прямоугольными, но вы не можете создавать контуры в виде окружности.

Если вы наметите контур на элементе, он займет столько же места на веб-страницах, как если бы у вас не было на нем контура. Контур перекрывает поля margins (прозрачная область за пределами границы) и окружающие элементы.

Свойство outline-style устанавливает стиль контура элемента, например: solid, dotted и т. д.

Свойство outline-style может иметь одно из следующих значений: none, solid, dashed, dotted, double, inset, outset, groove, и ridge. Теперь давайте взглянем на следующую иллюстрацию: она дает вам представление о различиях между типами стилей контура.

Значение none не отображает контур. Значения inset, outset, groove и ridge создают 3D-подобный эффект, который зависит от значения цвета контура. Обычно этот эффект достигается созданием «тени» из двух цветов, которые немного светлее и темнее, чем цвет контура.

Давайте попробуем следующий пример и посмотрим, как это работает:

h1 {
    outline-style: dotted;
}
p {
    outline-style: ridge;
}

Вы должны указать outline-style, чтобы контур отображался вокруг элемента, потому что по умолчанию он имеет значение none. Ширина или толщина контура по умолчанию является medium, а цвет контура по умолчанию такой же, как и color текста.

Свойство outline-width

Свойство outline-width определяет ширину контура, добавляемого в элемент.

Посмотрим следующий пример, чтобы понять, как это на самом деле работает:

p {
    outline-style: dashed;
    outline-width: 10px;
}

Ширина контура может быть указана с использованием любого значения, например, px, em, rem и т. д. Его также можно указать с помощью одного из трех ключевых слов: thin, medium, и thick Процентные или отрицательные значения недопустимы — как и свойство border-width.

Свойство outline-color

Свойство outline-color устанавливает цвет контура элемента.

Это свойство принимает те же значения, что и свойство color.

Следующие правила добавляют сплошной контур синего цвета вокруг абзацев.

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

CSS-свойство outline-width или outline-color не будут работать, если используются раздельно. Используйте свойство outline-style, чтобы сначала установить стиль контура.

Сокращенное свойство outline

CSS-свойство outline является кратким свойством для установки одного или нескольких отдельных свойств outline-style, outline-width и outline-color в одном правиле.

Давайте посмотрим на следующий пример, чтобы понять, как он работает:

p {
    outline: 5px solid 	#ff00ff;
}

Если значение для отдельного свойства outline пропущено или не указано, вместо него будет использоваться значение по умолчанию для этого свойства, если оно есть.

Например, если значение для свойства outline-color отсутствует или не указано при установке контуров, свойство color элемента будет использоваться в качестве значения для контура элемента.

В следующем примере контур будет представлять собой сплошную зеленую линию шириной 5 пикселей:

p {
    color: green;
    outline: 5px solid;
}

Но в случае outline-style отсутствие значения не будет отображать контуры вообще, поскольку значением по умолчанию для этого свойства является none. В следующем примере контура не будет:

p {
    outline: 5px #00ff00;
}

Удаление контура outline у активных ссылок

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

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

Следующий пример показывает, как убрать контур у ссылок

a, a:acive, a:focus {
    outline: none;
}
Источник

outline-color свойство CSS задает цвет контура элемента.

Try it

Syntax

outline-color: #f92525;
outline-color: rgb(30,222,121);
outline-color: blue;


outline-color: invert;


outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

Свойство outline-color указывается как любое из значений, перечисленных ниже.

Values

<color>

Цвет контура, указанный как <color> .

invert

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

Description

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

Часто бывает удобнее использовать свойство сокращенную outline при определении внешнего вида контура.

Accessibility concerns

Пользовательские стили фокус обычно предполагают внесение корректировок в outline собственности. Если цвет контура отрегулирован, важно убедиться, что контрастность между ним и фоном, на котором находится контур, достаточно высока, чтобы люди, испытывающие слабое зрение, могли его воспринимать.

Коэффициент цветового контраста определяется путем сравнения яркости текста и значений цвета фона. Чтобы соответствовать текущим рекомендациям по доступности веб-контента (WCAG) , требуется соотношение 4,5:1 для текстового контента и 3:1 для более крупного текста, например заголовков. Крупный текст определяется как 18,66 пикселя и полужирный или больше, или 24 пикселя или больше.

  • WebAIM:Проверка цветового контраста
  • MDN Понимание СППН,Руководящий принцип 1.4 пояснения
  • Понимание Критерий успеха 1.4.3 | W3C Понимание ВКПГ 2.0

Formal definition

Initial value invert , для браузеров, поддерживающих его, currentColor для других
Applies to all elements
Inherited no
Computed value Для ключевого слова invert вычисленное значение является invert . Для значения цвета, если значение является полупрозрачным, вычисленное значение будет соответствовать rgba() . Если это не так, это будет соответствующий rgb() . transparent ключевое слово сопоставляется rgba(0,0,0,0) .
Animation type a color

Formal syntax

outline-color =   <color>  |  invert

Examples

Установка сплошного синего контура

HTML

<p>My outline is blue, as you can see.</p>

CSS

p {
  outline: 2px solid;      
  outline-color: #0000FF;  
  margin: 5px;
}

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
outline-color

1

12

1.5

1-3.6

8

7

1.2

37

18

4

14

1

1.0
invert

No

12-79

1-3

8

7-15

No

No

No

No

No

No

No

See also

  • outline
  • outline-color
  • outline-style
  • outline-width
  • <color> тип данных
  • Другие цветов , связанные свойства: color , background-color , border-color , text-decoration-color , text-emphasis-color , text-shadow , caret-color , и column-rule-color
  • Применение цвета к элементам HTML с помощью CSS

CSS

  • orphans

    Свойство orphans CSS задает минимальное количество строк блок-контейнера,которые должны отображаться внизу страницы,региона,колонки.

  • outline

    Свойство outline CSS задает большинство свойств одного объявления.

  • outline-offset

    CSS-свойство outline-offset задает пространство между элементом outline и edge или border.

  • outline-style

    Наборы свойств CSS в стиле структуры элемента. Часто удобнее использовать сокращенную структуру свойств при определении разрешений внешнего вида.

Источник

How can I make the blue outline colour be #D5A021 instead of blue when the users clicks on the button?

I think it may have something to do with btn-primary

HTML

<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>

CSS

.btn-xl {
  padding: 1rem 2rem
}

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  color: #fff;
  background-color: #D5A021!important;
}

WebDevBooster's user avatar

asked Jan 13, 2018 at 15:47

1

I’m assuming that you are looking to override the default Bootstrap classes. And if that’s the case, then the following code will do what you want: 

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.btn-xl {
            padding: 1rem 2rem
        }
        .btn-primary, 
        .btn-primary:hover {
            background-color: #D5A021;
            border-color: #D5A021;
        }
        .btn-primary:active,
        .btn-primary:focus {
            color: #fff;
            background-color: #D5A021 !important;
            border-color: #D5A021 !important;
            box-shadow: 0 0 0 0.2rem rgba(213,160,33, 0.5) !important;
        }
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>

It’s the box-shadow property that needs to be modified in Bootstrap 4.

answered Jan 13, 2018 at 17:25

WebDevBooster's user avatar

WebDevBoosterWebDevBooster

14.5k9 gold badges68 silver badges70 bronze badges

You can add CSS outline-color Property, wherever you need it.

For example,

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
  outline-color: #D5A021;
}

answered Jan 13, 2018 at 15:50

Liadco's user avatar

LiadcoLiadco

3342 silver badges11 bronze badges

0

Источник

CSS свойства

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

CSS свойство outline-color устанавливает цвет контура элемента.

Во избежании ошибок старайтесь объявлять стиль контура (outline-style) до установки цвета контура. Контур не является частью элемента (свойства элемента width и height не содержат ширину контура).

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

CSS синтаксис:

outline-color:"invert | color | initial | inherit";

JavaScript синтаксис:

object.style.outlineColor = "#777"

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

Значение Описание
invert Выполняет инверсию цвета (контур будет виден, независимо от цвета заднего фона). Это значение по умолчанию.
color Задает цвет контура (Имя цвета | HEX | RGB(A) | HSL(A)).
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства CSS outline-color</title>
<style> 
div {
outline-style : solid; /* устанавливаем тип контура - сплошной */
outline-width : 3px; /* устанавливаем ширину контура */
width : 12em; /* устанавливаем ширину блока */
height : 5em; /* устанавливаем высоту блока */
background-color : Plum; /* устанавливает цвет заднего фона */
border : 2px solid white; /* устанавливает сплошную границу размером 2px белого цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
}
.test   {outline-color : red;}  /* устанавливаем цвет контура (имя цвета) */
.test2 {outline-color : #c2bb00;}  /* устанавливаем цвет контура (HEX) */
.test3 {outline-color : rgb(0,255,0);}  /* устанавливаем цвет контура (RGB) */
.test4 {outline-color : rgba(0,255,0, .5);}  /* устанавливаем цвет контура (RGBA) */
.test5 {outline-color : hsl(253, 100%, 38%);}  /* устанавливаем цвет контура (HSL) */
.test6 {outline-color : hsla(253, 100%, 38%, .5);}  /* устанавливаем цвет контура (HSLA) */
</style>
</head>
	<body>
		<div class = "test">red</div>
		<div class = "test2">#c2bb00</div>
		<div class = "test3">rgb(0,255,0)</div><br>
		<div class = "test4">rgba(0,255,0, .5)</div>
		<div class = "test5">hsl(253, 100%, 38%)</div>
		<div class = "test6">hsla(253, 100%, 38%, .5)</div>
	</body>
</html>

Пример указания цвета контура в CSS (свойство outline-color).

Пример указания цвета контура в CSS (свойство outline-color).
CSS свойства

Источник

Понравилась статья? Поделить с друзьями:

Читайте также:

  • Как изменить цвет office 2007
  • Как изменить цвет net graph
  • Как изменить цвет navigation bar swift
  • Как изменить цвет navbar bootstrap 5
  • Как изменить цвет midnight commander

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии