Руководство CSS Outline

CSS Outline
CSS outline-style
CSS outline-width
CSS outline-color
CSS outline-offset

1. CSS Outline

CSS Outline создает что-то похожее на границу (border), обрисовывается вокруг элемента и за границами, помогает элементу выделиться.

В отличии от границы (border), Outline не занимает пространство вокруг элемента. Согласно спецификации, Outline не является прямоугольником, даже если вам всегда кажется, что это прямоугольник.

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

Например:

Outline нарисован вокруг элемента, и за границей, не занимает пространство вокруг элемента. Поэтому если Outline имеет большую ширину, он может перекрыть (overlap) другим содержимым вне элемента. Смотрите следующий пример:

Some content 1
<div style="border: 3px solid gray; outline: AliceBlue solid 10px;padding:10px;">
    border: 3px solid gray; <br/>
    outline: AliceBlue  solid 10px;
</div>
Some content 2

Синтаксис CSS Outline:

/* Syntax:  */
outline: color  style width;
/* style: required */

Или:

outline-color: color;
outline-style: style;
outline-width: width;

2. CSS outline-style

CSS outline-style используется для определения стиля Outline, он может получить одно из следующих значений:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

Значения groove, ridge, inset, outset создают 3D Outline вокруг элемента, эффект 3D зависит от значения CSS outline-color.

В примере ниже я настроил значение CSS outline-width10px, достаточное большое значение чтобы вы легко смогли увидеть разницу между многими Outline-style.

outline-style-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-color: green;
           outline-width: 10px;
           margin: 30px 5px;
         }
         p.dotted {outline-style: dotted;}
         p.dashed {outline-style: dashed;}
         p.solid {outline-style: solid;}
         p.double {outline-style: double;}
         p.groove {outline-style: groove;}
         p.ridge {outline-style: ridge;}
         p.inset {outline-style: inset;}
         p.outset {outline-style: outset;}
      </style>
   </head>
   <body>
      <h3>CSS outline-style</h3>

      <p class="dotted">
          dotted - A series of round dots.
      </p>
      <p class="dashed">
        dashed - A series of square-ended dashes.
      </p>
      <p class="solid">
         solid - A single line segment.
      </p>
      <p class="double">
        double - Two parallel solid lines with some space between them.
        When using this value, the border-width value determines the
        sum of the lines and the space between them.
      </p>
      <p class="groove">
          groove - Looks as if it were carved in the canvas.
      </p>
      <p class="ridge">ridge - Looks as if it were coming out of the canvas.</p>
      <p class="inset">
        inset - Looks as if the content on the inside of the border is sunken into the canvas.
        Treated as ridge in the collapsing border model.
      </p>
      <p class="outset">
        outset - Looks as if the content on the inside of the border is coming out of the canvas.
        Treated as groove in the collapsing border model.
      </p>
   </body>
</html>

none vs hidden

CSS outline-style:none и CSS outline-style:hidden одинаковы, они лишают элемента Outline.

3. CSS outline-width

CSS outline-width определяет ширину Outline, он может получить один из следующих значений:

thin	Точнее 1px.
medium	Точнее 3px.
thick	Точнее 5px.
px, pt, cm, em,...	Определенное число, например 1px, 1pt, 2cm, 2em,...

outline-width-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: outset;
           outline-color: green;
           margin: 30px 5px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-width</h3>
      <p style="outline-width:1px">
          outline-width:1px
      </p>
      <p style="outline-width:5px">
        outline-width:5px
      </p>
      <p style="outline-width:10px">
         outline-width:10px
      </p>
   </body>
</html>

4. CSS outline-color

CSS outline-color используется для настройки цвета для Outline. Его значениями могут быть:

name	Название цвета, например red, blue, green,.. (красный, голубой, зеленый,...)
RGB	Значение RGB, например rgb(255,10,20).
Hex	Значение Hex, например #ff0000.
invert	Браузер автоматически предоставит подходящий цвет, гарантируя что он будет видимым (Не будет спутан ни с каким другим цветом фона вокруг элемента).

Например:

outline-color-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: inset;
           outline-width: 10px;
           margin: 30px 15px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-color</h3>
      <p style="outline-color:yellow">
          outline-color:yellow;
      </p>
      <p style="outline-color:blue">
        outline-color:blue;
      </p>
      <p style="outline-color:green">
         outline-color:green;
      </p>
   </body>
</html>

5. CSS outline-offset

CSS outline-offset используется для создания пространства между Outline и границами (border) элемента.

Его значениями могут быть:

Определенное значение, например 1px, 2em, 3cm,...
initial
inherit

Значение по умолчанию у outline-offset является 0, это значит по умолчанию Outline будет нарисован близко к границе элемента.

outline-offset-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Outline</title>
    <meta charset="UTF-8"/>
    <style>
       .my-div {
          border: 3px solid gray;
          outline: green dotted 10px;
          padding:10px;
          margin: 25px;
          outline-offset: 10px;
       }
    </style>
</head>
<body>
    <h3>CSS outline-offset</h3>
    <div class ="my-div">
        border: 3px solid gray; <br/>
        outline: green dotted 10px; <br/>
        padding:10px; <br/>
        margin: 40px; <br/>
        outline-offset: 10px;
    </div>
</body>
</html>