Autor publikacji: Virtual Patriot - Administrator

border-image-outset

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - border-image-outset property (LV3)

Przeznaczenie właściwości `border-image-outset`

Za pomocą właściwości border-image-outset możemy określić rozmiar odległości obrazkowego obramowania interesującego nas elementu HTML od krawędzi tego elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `border-image-outset`

przeznaczenie: element HTML każdego typu posiadający właściwość border-width wraz z wartością różną od wartości 0 oraz właściwość border-style wraz z wartością różną od wartości none, lecz nie elementy HTML pierwotnie budujące tabelę HTML, gdy element HTML typu table lub inline-table posiada właściwość border-collapse wraz z wartością collapse
pozycja: dowolna
dziedziczenie: nie
wartość initial: 0
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `border-image-outset`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 11
: tak

Zobacz więcej informacji o interpretacji właściwości border-image-outset.

Opis wartości właściwości `border-image-outset`

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości border-image-outset oraz z góry zdefiniowanego wzorca wartości możemy określić rozmiar odległości obrazkowego obramowania interesującego nas elementu HTML od krawędzi tego elementu HTML.

Składniki wzorca wartości właściwości `border-image-outset`

            top right bottom left

Przykładowe zapisy

5px

5px 10px

5px 10px 15px

5px 10px 15px 20px

top

Składnik top jest wymaganym składnikiem wzorca wartości właściwości border-image-outset. Składnik top określa rozmiar odległości górnego obrazkowego obramowania interesującego nas elementu HTML od górnej krawędzi tego elementu HTML.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub wyłącznie liczba
Informacje dodatkowe: wartość w postaci liczby oznacza rozmiar równy wielokrotności rozmiaru szerokości górnego nieobrazkowego obramowania elementu HTML, dla którego chcemy określić rozmiar odległości górnego obrazkowego obramowania od górnej krawędzi tego elementu HTML

right

Składnik right jest wymaganym składnikiem wzorca wartości właściwości border-image-outset. Składnik right określa rozmiar odległości prawego obrazkowego obramowania interesującego nas elementu HTML od prawej krawędzi tego elementu HTML.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub wyłącznie liczba
Informacje dodatkowe: wartość w postaci liczby oznacza rozmiar równy wielokrotności rozmiaru szerokości prawego nieobrazkowego obramowania elementu HTML, dla którego chcemy określić rozmiar odległości prawego obrazkowego obramowania od prawej krawędzi tego elementu HTML

bottom

Składnik bottom jest wymaganym składnikiem wzorca wartości właściwości border-image-outset. Składnik bottom określa rozmiar odległości dolnego obrazkowego obramowania interesującego nas elementu HTML od dolnej krawędzi tego elementu HTML.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub wyłącznie liczba
Informacje dodatkowe: wartość w postaci liczby oznacza rozmiar równy wielokrotności rozmiaru szerokości dolnego nieobrazkowego obramowania elementu HTML, dla którego chcemy określić rozmiar odległości dolnego obrazkowego obramowania od dolnej krawędzi tego elementu HTML

left

Składnik left jest wymaganym składnikiem wzorca wartości właściwości border-image-outset. Składnik left określa rozmiar odległości lewego obrazkowego obramowania interesującego nas elementu HTML od lewej krawędzi tego elementu HTML.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub wyłącznie liczba
Informacje dodatkowe: wartość w postaci liczby oznacza rozmiar równy wielokrotności rozmiaru szerokości lewego nieobrazkowego obramowania elementu HTML, dla którego chcemy określić rozmiar odległości lewego obrazkowego obramowania od lewej krawędzi tego elementu HTML

Przykład

  border-image-outset:5px 30px;

górne obrazkowe obramowanie tego elementu "div" znajduje się w odległości równej 5 pikseli od górnej krawędzi tego elementu "div", dolne obrazkowe obramowanie tego elementu "div" znajduje się w odległości równej 5 pikseli od dolnej krawędzi tego elementu "div", prawe obrazkowe obramowanie tego elementu "div" znajduje się w odległości równej 30 pikseli od prawej krawędzi tego elementu "div", natomiast lewe obrazkowe obramowanie tego elementu "div" znajduje się w odległości równej 30 pikseli od lewej krawędzi tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "border-image-outset" wraz z następującymi wartościami: "5px 30px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        border-width:20px;
        border-style:solid;
        border-image-source:url(https://webkod.pl/files/css/obramowanie-04.png);
        border-image-slice:20;
        border-image-width:20px;
        border-image-outset:5px 30px;
        border-image-repeat:round;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      górne obrazkowe obramowanie tego elementu "div" znajduje się w odległości równej 5 pikseli od górnej krawędzi tego elementu "div", dolne obrazkowe obramowanie tego elementu "div" znajduje się w odległości równej 5 pikseli od dolnej krawędzi tego elementu "div", prawe obrazkowe obramowanie tego elementu "div" znajduje się w odległości równej 30 pikseli od prawej krawędzi tego elementu "div", natomiast lewe obrazkowe obramowanie tego elementu "div" znajduje się w odległości równej 30 pikseli od lewej krawędzi tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "border-image-outset" wraz z następującymi wartościami: "5px 30px"
    </div>

  </body>
</html>