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

View more Tutorials:

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-width  10px, достаточное большое значение чтобы вы легко смогли увидеть разницу между многими  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>

View more Tutorials: