outline-offset
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since апÑÐµÐ»Ñ 2017 г..
CSS-ÑвойÑÑво outline-offset задаÑÑ ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ð¾Ð±Ð²Ð¾Ð´ÐºÐ¾Ð¹ и кÑаем или Ñамкой ÑлеменÑа.
ÐнÑеÑакÑивнÑй пÑимеÑ
outline-offset: 4px;
outline-offset: 0.6rem;
outline-offset: 12px;
outline: 5px dashed blue;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
border: 2px solid crimson;
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
СинÑакÑиÑ
/* ÐнаÑÐµÐ½Ð¸Ñ <length> */
outline-offset: 3px;
outline-offset: 0.2em;
/* ÐлобалÑнÑе знаÑÐµÐ½Ð¸Ñ */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;
ÐнаÑениÑ
<length>-
Ð Ð°Ð·Ð¼ÐµÑ ÑаÑÑÑоÑÐ½Ð¸Ñ Ð¼ÐµÐ¶Ð´Ñ ÑлеменÑом и его обводкой. ÐÑи оÑÑиÑаÑелÑном знаÑении обводка ÑаÑполагаеÑÑÑ Ð²Ð½ÑÑÑи ÑлеменÑа. ÐнаÑение
0ÑазмеÑÐ°ÐµÑ Ð¾Ð±Ð²Ð¾Ð´ÐºÑ Ð²Ð¿Ð»Ð¾ÑнÑÑ Ðº ÑлеменÑÑ.
ÐпиÑание
Ðбводка â ÑÑо Ð»Ð¸Ð½Ð¸Ñ Ð²Ð¾ÐºÑÑг ÑлеменÑа за пÑеделами Ñамки. РаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ ÑлеменÑом и его обводкой пÑозÑаÑно. ÐÑÑгими Ñловами, оно бÑÐ´ÐµÑ Ñаким же, как и Ñон ÑодиÑелÑÑкого ÑлеменÑа.
ФоÑмалÑное опÑеделение
| ÐаÑалÑное знаÑение | 0 |
|---|---|
| ÐÑименÑеÑÑÑ Ðº | вÑе ÑлеменÑÑ |
| ÐаÑледÑеÑÑÑ | Ð½ÐµÑ |
| ÐбÑабоÑка знаÑÐµÐ½Ð¸Ñ | как Ñказано, но Ñ Ð¾ÑноÑиÑелÑной длиной, конвеÑÑиÑÑемой в абÑолÑÑнÑе Ð´Ð»Ð¸Ð½Ñ |
| Animation type | длина |
ФоÑмалÑнÑй ÑинÑакÑиÑ
outline-offset =
<length>
ÐÑимеÑÑ
РаÑÑÑоÑние обводки в пикÑелÑÑ
HTML
<p>Gallia est omnis divisa in partes tres.</p>
CSS
p {
outline: 1px dashed red;
outline-offset: 10px;
background: yellow;
border: 1px solid blue;
margin: 15px;
}
РезÑлÑÑаÑ
СпеÑиÑикаÑии
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-offset |