Obraz krawędzi CSS

Obraz krawędzi CSS

Poprzez użycie CSS border-image Atrybut, który pozwala ustawić obraz jako ramkę wokół elementu.

Atrybut CSS border-image

CSS border-image Atrybut pozwala określić używany obraz zamiast otaczającej go ramki.

Atrybut ma trzy części:

  • obraz używany jako ramka
  • gdzie należy przyciąć obraz
  • definiuje, czy środkowa część powinna być powtarzana czy rozciągnięta

Użyjemy tego obrazu ("border.png")

border-image Atrybut akceptuje obraz, dzieli go na dziewięć części, jak w planszy gry w kółko. Następnie umieszcza rogi w rogach i w zależności od ustawień powtarza lub rozciąga środkowe części.

Uwaga:Aby border-image działa, element musi również być ustawiony border Atrybut!

W tym przypadku środkowa część obrazu jest powtarzana, aby utworzyć ramkę:

Obraz jako ramka!

Oto kod:

Przykład

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Spróbuj sam

W tym przypadku środkowa część obrazu jest rozciągnięta, aby utworzyć ramkę:

Obraz jako ramka!

Oto kod:

Przykład

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Spróbuj sam

Wskazówka:border-image Atrybut jest skróconą nazwą następujących atrybutów:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - różne wartości cięcia

Różne wartości cięcia całkowicie zmieniają wygląd ramki:

Przykład 1:

border-image: url(border.png) 50 round;

Przykład 2:

border-image: url(border.png) 20% round;

Przykład 3:

border-image: url(border.png) 30% round;

Oto kod:

Przykład

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Spróbuj sam

Atrybut CSS do rysowania ramki obrazu

Atrybut Opis
border-image Skrócona nazwa atrybutu do ustawienia wszystkich atrybutów border-image-*.
border-image-source Definicja ścieżki do obrazu używanego jako ramki.
border-image-slice Określa, jak przycinać obraz ramki.
border-image-width Określa szerokość obrazu ramki.
border-image-outset Określa, ile obszaru obrazu ramki jest poza obszarem ramki.
border-image-repeat Określa, czy obraz ramki powinien być powtarzany, zaokrąglony, czy rozciągnięty.