Ostatnio edytowany:

border-image-source

Autor: Virtual Patriot

Opis właściwości border-image-source

Za pomocą właściwości border-image-source możemy wskazać dla przeglądarki internetowej obrazek, na podstawie którego powinno zostać utworzone obrazkowe obramowanie dla interesującego nas elementu HTML.

Dodatkowo w niektórych przeglądarkach internetowych, aby móc ujrzeć efekt obrazkowego obramowania wartością właściwości border-width elementu HTML musi być wartość różna od wartości "0", natomiast wartością właściwości border-style elementu HTML musi być wartość różna od wartości "none".

Dodatkowe techniczne informacje o właściwości border-image-source

przeznaczenie

element HTML każdego typu, lecz nie elementy HTML pierwotnie budujące tabelę HTML, gdy element HTML pierwotnie budujący tabelę HTML posiada właściwość border-collapse wraz z wartością collapse

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

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

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

none

Opis

Wartość none jest domyślną wartością właściwości border-image-source.

Domyślnie element HTML nie posiada obrazkowego obramowania.

Przykład

  border-image-source:none;
ten przykładowy element "div" nie posiada obrazkowego obramowania

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;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten przykładowy element "div" nie posiada obrazkowego obramowania
    </div>

  </body>
</html>

url()

Opis

Za pomocą właściwości border-image-source oraz funkcji url() możemy wskazać dla przeglądarki internetowej obrazek, na podstawie którego powinno zostać utworzone obrazkowe obramowanie dla interesującego nas elementu HTML.

przykładowy obrazek mogący stanowić obrazkowe obramowanie elementu HTML

Przykładowy obrazek (w powiększeniu), na podstawie którego może powstać obrazkowe obramowanie elementu HTML.

Przykład

  border-image-source:url(http://webkod.pl/files/css/obrazek-04.png);
obrazkiem, na podstawie którego zostało utworzone obrazkowe obramowanie dla tego elementu "div" jest obrazek znajdujący się pod adresem "http://webkod.pl/files/css/obrazek-04.png", ponieważ do tego elementu "div" została dodana właściwość "border-image-source" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "http://webkod.pl/files/css/obrazek-04.png"

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(http://webkod.pl/files/css/obrazek-04.png);
        border-image-slice:20;
        border-image-width:20px;
        border-image-repeat:round;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkiem, na podstawie którego zostało utworzone obrazkowe obramowanie dla tego elementu "div" jest obrazek znajdujący się pod adresem "http://webkod.pl/files/css/obrazek-04.png", ponieważ do tego elementu "div" została dodana właściwość "border-image-source" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "http://webkod.pl/files/css/obrazek-04.png"
    </div>

  </body>
</html>