Obrazy obramowania CSS
Obrazy obramowania CSS
Za pomocą właściwości CSS border-image
możesz ustawić obraz, który będzie używany jako obramowanie wokół elementu.
CSS border-image Właściwość
Właściwość CSS border-image
umożliwia określenie obrazu, który ma być używany zamiast normalnego obramowania wokół elementu.
Nieruchomość składa się z trzech części:
- Obraz do wykorzystania jako obramowanie
- Gdzie pociąć obraz
- Określ, czy środkowe sekcje mają się powtarzać, czy rozciągać
Użyjemy następującego obrazu (zwanego „border.png”):
Właściwość border-image
pobiera obraz i dzieli go na dziewięć części, jak na tablicy w kółko i krzyżyk. Następnie umieszcza rogi w rogach, a środkowe sekcje są powtarzane lub rozciągane zgodnie z określeniem.
Uwaga: Aby border-image
element działał, element potrzebuje również
border
zestawu właściwości!
Tutaj środkowe sekcje obrazu są powtarzane, aby utworzyć granicę:
Obraz jako granica!
Oto kod:
Przykład
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Tutaj środkowe sekcje obrazu są rozciągnięte, aby utworzyć granicę:
Obraz jako granica!
Oto kod:
Przykład
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Wskazówka: Właściwość border-image
jest w rzeczywistości skróconą własnością dla
właściwości border-image-source
, border-image-slice
, border-image-width
i
.border-image-outset
border-image-repeat
CSS border-image - Różne wartości plasterka
Różne wartości plasterków całkowicie zmieniają wygląd obramowania:
Przykład 1:
border-image: url(border.png) 50 rundy;
Przykład 2:
border-image: url(border.png) 20% rundy;
Przykład 3:
border-image: url(border.png) 30% runda;
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;
}
Właściwości obrazu ramki CSS
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |