Autor publikacji
Virtual Patriot - Administrator

border-image-width

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości border-image-width

Za pomocą właściwości border-image-width możemy określić rozmiar szerokości obrazkowego obramowania interesującego nas elementu HTML.

Informacje dodatkowe

brak

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

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

1

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości border-image-width

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-width

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości border-image-width oraz z góry zdefiniowanego wzorca wartości możemy określić rozmiar szerokości obrazkowego obramowania interesującego nas elementu HTML.

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

Ważne

wartości właściwości border-image-width 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-width jest tylko jeden składnik

Przykładowe zapisy

auto

15px auto

5px 10px 15px

5px 10px 15px 20px

top

Składnik top jest wymaganym składnikiem wzorca wartości właściwości border-image-width. Składnik top określa rozmiar szerokości górnego obrazkowego obramowania interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wyłącznie liczba lub wartość auto

Informacje dodatkowe

wartość auto oznacza rozmiar równy wartości składnika top wzorca wartości właściwości border-image-slice elementu HTML, dla którego chcemy określić rozmiar szerokości górnego obrazkowego obramowania

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 szerokości górnego obrazkowego obramowania

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości elementu HTML, dla którego chcemy określić rozmiar szerokości górnego obrazkowego obramowania

Składnik right jest wymaganym składnikiem wzorca wartości właściwości border-image-width. Składnik right określa rozmiar szerokości prawego obrazkowego obramowania interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wyłącznie liczba lub wartość auto

Informacje dodatkowe

wartość auto oznacza rozmiar równy wartości składnika right wzorca wartości właściwości border-image-slice elementu HTML, dla którego chcemy określić rozmiar szerokości prawego obrazkowego obramowania

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 szerokości prawego obrazkowego obramowania

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości elementu HTML, dla którego chcemy określić rozmiar szerokości prawego obrazkowego obramowania

bottom

Składnik bottom jest wymaganym składnikiem wzorca wartości właściwości border-image-width. Składnik bottom określa rozmiar szerokości dolnego obrazkowego obramowania interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wyłącznie liczba lub wartość auto

Informacje dodatkowe

wartość auto oznacza rozmiar równy wartości składnika bottom wzorca wartości właściwości border-image-slice elementu HTML, dla którego chcemy określić rozmiar szerokości dolnego obrazkowego obramowania

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 szerokości dolnego obrazkowego obramowania

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości elementu HTML, dla którego chcemy określić rozmiar szerokości dolnego obrazkowego obramowania

left

Składnik left jest wymaganym składnikiem wzorca wartości właściwości border-image-width. Składnik left określa rozmiar szerokości lewego obrazkowego obramowania interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wyłącznie liczba lub wartość auto

Informacje dodatkowe

wartość auto oznacza rozmiar równy wartości składnika left wzorca wartości właściwości border-image-slice elementu HTML, dla którego chcemy określić rozmiar szerokości lewego obrazkowego obramowania

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 szerokości lewego obrazkowego obramowania

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości elementu HTML, dla którego chcemy określić rozmiar szerokości lewego obrazkowego obramowania

Przykład

  border-image-width:12px 16px 20px 24px;
rozmiar szerokości górnego obrazkowego obramowania tego elementu "div" wynosi 12 pikseli, rozmiar szerokości prawego obrazkowego obramowania tego elementu "div" wynosi 16 pikseli, rozmiar szerokości dolnego obrazkowego obramowania tego elementu "div" wynosi 20 pikseli, natomiast rozmiar szerokości lewego obrazkowego obramowania tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "border-image-width" wraz z następującymi wartościami: "12px 16px 20px 24px"

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:12px 16px 20px 24px;
        border-image-repeat:round;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar szerokości górnego obrazkowego obramowania tego elementu "div" wynosi 12 pikseli, rozmiar szerokości prawego obrazkowego obramowania tego elementu "div" wynosi 16 pikseli, rozmiar szerokości dolnego obrazkowego obramowania tego elementu "div" wynosi 20 pikseli, natomiast rozmiar szerokości lewego obrazkowego obramowania tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "border-image-width" wraz z następującymi wartościami: "12px 16px 20px 24px"
    </div>

  </body>
</html>