Руководство 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>
