Przejdź do treści

Obramowanie - CSS

Atrybuty mieszane obramowania obrazkowego {border-image}

Jak ustawić obrazek obramowania, jego narożniki, krawędzie, środek, a także jego szerokość (grubość) i powtarzanie (powielanie)?

CSS 3 - Chrome Firefox Edge Opera Safari

selektor { border-image: wartości atrybutów }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości obramowani obrazkowego: źródło, obcięcie, szerokość, nawis i powtarzanie.

Polecenie pozwala w sposób skrócony wypełnić wszystkie atrybuty obramowania obrazkowego. Ważne jest przy tym zachowanie właściwej kolejności oraz odpowiednich znaków rozdzielających kolejne wartości. Lista atrybutów może się składać z trzech części:

  1. źródła
  2. obcięcia / szerokości / nawisu - możliwe są kombinacje:
    border-image-slice
border-image-slice / border-image-width
border-image-slice / border-image-width / border-image-outset
  3. powtarzania

Jedna lub więcej z tych części musi się pojawić na liście wartości atrybutów. Na przykład:

div { border-image: url(punkt.gif) 10 }	/* border-image-source: url(punkt.gif); border-image-slice: 10 */
div { border-image: url(punkt.gif) 10 / 10px }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px */
div { border-image: url(punkt.gif) 10 / 10px / 5px } /* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-outset: 5px */
div { border-image: url(punkt.gif) 10 / 10px / 5px repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-outset: 5px; border-image-repeat: reptat */
div { border-image: url(punkt.gif) 10 / 10px repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-repeat: reptat */
div { border-image: url(punkt.gif) 10 repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: reptat */
div { border-image: url(punkt.gif) repeat }	/* border-image-source: url(punkt.gif); border-image-repeat: reptat */

Przykład {border-image}

border-image: url(punkt.gif) 10 / 10px / 5px repeat

Komentarze

Zobacz więcej komentarzy

Facebook