Autor publikacji: Virtual Patriot - Administrator

border-image-source

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Wrzesień 07 2020

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

Przeznaczenie 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.

Informacje dodatkowe: brak

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

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: none
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

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

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

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

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

none

Wyjaśnienie

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

url()

Wyjaśnienie

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ład

  border-image-source:url(https://webkod.pl/files/css/obramowanie-04.png);

obrazkiem, na podstawie którego zostało utworzone obrazkowe obramowanie dla tego elementu "div" jest obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obramowanie-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ść "https://webkod.pl/files/css/obramowanie-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(https://webkod.pl/files/css/obramowanie-04.png);
        border-image-slice:20;
        border-image-width:20px;
        border-image-repeat:round;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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 "https://webkod.pl/files/css/obramowanie-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ść "https://webkod.pl/files/css/obramowanie-04.png"
    </div>

  </body>
</html>