Ostatnio edytowany:

box-decoration-break

Autor: Virtual Patriot

Opis właściwości box-decoration-break

Za pomocą właściwości box-decoration-break możemy określić co ma stać się z dekoracją interesującego nas elementu HTML w sytuacji gdy obszar tego elementu HTML musi zostać przełamany na kilka części. Mowa tu o dekoracji, za którą odpowiadają między innymi takie właściwości CSS jak: margin, border, padding, border-image, border-radius, box-shadow, background-image.

Dodatkowe techniczne informacje o właściwości box-decoration-break

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości box-decoration-break

Firefox

tak

Google Chrome

tak, lecz z przedrostkiem -webkit-

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak, lecz z przedrostkiem -webkit-

Internet Explorer

nie

Edge

nie

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

Opis wartości właściwości box-decoration-break

slice

Opis

Wartość slice jest domyślną wartością właściwości box-decoration-break.

Domyślnie, gdy obszar elementu HTML musi zostać przełamany na kilka części, wtedy dekoracja elementu HTML nie jest klonowana w identyczny sposób do każdej kolejnej części wspomnianego obszaru.

Przykład

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych

Obszar przykładowego elementu "span" został przełamany na kilka części, lecz dekoracja przykładowego elementu "span" nie została w identyczny sposób sklonowana do każdej kolejnej części wspomnianego obszaru przykładowego elementu "span".

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 {
        margin:1em;
        border:3px solid black;
        border-radius:12px;
        padding:1em;
        background-color:#AFF;
        background-image:url(http://webkod.pl/files/css/obrazek-01.png);
        background-repeat:no-repeat;
        box-shadow:0 4px 4px red;
        font-size:1.3em;
        line-height:4em;
      }
    </style>
  </head>

  <body>

    <span>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych
    </span>

  </body>
</html>

clone

Opis

Za pomocą wartości clone właściwości box-decoration-break możemy sprawić, że gdy obszar interesującego nas elementu HTML musi zostać przełamany na kilka części, wtedy dekoracja tego elementu HTML zostanie sklonowana w identyczny sposób do każdej kolejnej części wspomnianego obszaru.

Przykład

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych

Obszar przykładowego elementu "span" został przełamany na kilka części, ponadto dekoracja przykładowego elementu "span" została w identyczny sposób sklonowana do każdej kolejnej części wspomnianego obszaru przykładowego elementu "span", ponieważ do wspomnianego elementu "span" została dodana właściwość "box-decoration-break" wraz z wartością "clone".

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 {
        box-decoration-break:clone;
        -webkit-box-decoration-break:clone;
        margin:1em;
        border:3px solid black;
        border-radius:12px;
        padding:1em;
        background-color:#AFF;
        background-image:url(http://webkod.pl/files/css/obrazek-01.png);
        background-repeat:no-repeat;
        box-shadow:0 4px 4px red;
        font-size:1.3em;
        line-height:4em;
      }
    </style>
  </head>

  <body>

    <span>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych
    </span>

  </body>
</html>