Autor publikacji
Virtual Patriot - Administrator

border-image-outset

Data publikacji
Ostatnio edytowano

Opis 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

Dodatkowe techniczne informacje 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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 11

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

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

wzorzec wartości

Opis

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

Ważne

wartości właściwości border-image-outset możemy podawać według zasady formuły czterech wartości, dlatego tak naprawdę wymaganym składnikiem wzorca wartości właściwości border-image-outset jest tylko jeden składnik

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

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>