Własność CSS border-image-outset

Własność CSS border-image-outset określa odległość obrazu obramowania elementu od krawędzi pola obramowania tego elementu.

Przesunięty w ten sposób obraz obramowania nie wpływa na układ sąsiadujących elementów.

Przykłady

W tym przykładzie obraz w tle obramowania elementu div będzie oddalony od krawędzi pola obramowania tego elementu o 70 pikseli. W efekcie znajdzie się on wysoko „nad” wcześniejszym elementem p, nie zmieniając w żaden sposób jego położenia i sprawiając wrażenie, jakby element p znajdował się wewnątrz elementu div.

div {
  border-image: url("stars.png") 29 round;
  border-image-outset: 70px;
}
...
<p>Lorem ipsum dolor.</p><div></div>

Efekt:

Składnia i wartości

Własność border-image-outset przyjmuje jedną, dwie, trzy lub cztery liczby bez jednostki lub liczby z jednostką długości. Wartości ujemne są niedozwolone.

• Jedna wartość: jeśli podana jest jedna wartość, to ma ona zastosowanie z wszystkich czterech stron.
• Dwie wartości: pierwsza wartość odnosi się do górnej i dolnej krawędzi, a druga – do lewej i prawej.
• Trzy wartości: pierwsza odnosi się do górnej krawędzi, druga do lewej i prawej, a trzecia do dolnej.
• Cztery wartości: odnoszą się odpowiednio do górnej, prawej, dolnej i lewej krawędzi.

Jeśli wartością jest liczba bez jednostki, to stanowi ona mnożnik szerokości obramowania elementu, tzn. wartości własności border-width. Na przykład, jeżeli własność border-width ma wartość 3px, a własność border-image-outset zostanie ustawiona na 2, to ostatecznie wartość własności border-image-outset zostanie ustawiona na 6px.

Zastosowanie

Własność border-image-outset odnosi się do wszystkich elementów z wyjątkiem wewnętrznych elementów tabeli (np. tr, th, td), której własność border-collapse jest ustawiona na collapse.

Ponadto własność border-image-outset odnosi się także do pseudoelementu ::first-letter.

Podsumowanie

Podsumowanie