Руководство CSS Outline
View more Tutorials:
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;
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.
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>
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>
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>