betacode

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

  1. CSS Outline
  2. CSS outline-style
  3. CSS outline-width
  4. CSS outline-color
  5. 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>

Pуководства CSS

Show More