Gambar Perbatasan CSS
Gambar Perbatasan CSS
Dengan properti CSS border-image
, Anda dapat mengatur gambar untuk digunakan sebagai batas di sekitar elemen.
Properti gambar perbatasan CSS
Properti CSS border-image
memungkinkan Anda untuk menentukan gambar yang akan digunakan sebagai ganti batas normal di sekitar elemen.
Properti memiliki tiga bagian:
- Gambar yang akan digunakan sebagai perbatasan
- Dimana untuk mengiris gambar?
- Tentukan apakah bagian tengah harus diulang atau diregangkan
Kami akan menggunakan gambar berikut (disebut "border.png"):
Properti border-image
mengambil gambar dan mengirisnya menjadi sembilan bagian, seperti papan tic-tac-toe. Kemudian menempatkan sudut di sudut, dan bagian tengah diulang atau diregangkan seperti yang Anda tentukan.
Catatan: Agar border-image
berfungsi, elemen juga membutuhkan
border
set properti!
Di sini, bagian tengah gambar diulang untuk membuat batas:
Sebuah gambar sebagai perbatasan!
Berikut kodenya:
Contoh
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Di sini, bagian tengah gambar direntangkan untuk membuat batas:
Sebuah gambar sebagai perbatasan!
Berikut kodenya:
Contoh
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Tip: Properti border-image
sebenarnya adalah properti singkatan untuk
border-image-source
, border-image-slice
, border-image-width
,
border-image-outset
dan border-image-repeat
properti.
CSS border-image - Nilai Irisan yang Berbeda
Nilai irisan yang berbeda benar-benar mengubah tampilan perbatasan:
Contoh 1:
border-image: url(border.png) 50 putaran;
Contoh 2:
border-image: url(border.png) 20% bulat;
Contoh 3:
border-image: url(border.png) 30% bulat;
Berikut kodenya:
Contoh
#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;
}
Properti Gambar Perbatasan 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 |