outline-offset
En esta página
| Clase | Propiedades CSS |
|---|---|
outline-offset-<number> |
outline-offset: <number>px; |
-outline-offset-<number> |
outline-offset: calc(<number>px * -1); |
outline-offset-(<custom-property>) |
outline-offset: var(<custom-property>); |
outline-offset-[<value>] |
outline-offset: <value>; |
Examples#
Basic example#
Use utilities like outline-offset-2 and outline-offset-4 to change the offset of an element's outline:
{
outline-offset-0
outline-offset-2
outline-offset-4
<!-- [!code classes:outline-offset-0,outline-offset-2,outline-offset-4] -->
<button class="outline-2 outline-offset-0 ...">Button A</button>
<button class="outline-2 outline-offset-2 ...">Button B</button>
<button class="outline-2 outline-offset-4 ...">Button C</button>