CSS3 - Gambar Perbatasan
Properti gambar batas CSS digunakan untuk menambahkan boarder gambar ke beberapa elemen. Anda tidak perlu menggunakan kode HTML apa pun untuk memanggil gambar boarder. Contoh sintaks gambar boarder adalah sebagai berikut -
#borderimg {
border: 10px solid transparent;
padding: 15px;
}Nilai yang paling umum digunakan ditunjukkan di bawah ini -
| Sr.No. | Nilai & Deskripsi |
|---|---|
| 1 | border-image-source Digunakan untuk mengatur jalur gambar |
| 2 | border-image-slice Digunakan untuk mengiris gambar asrama |
| 3 | border-image-width Digunakan untuk mengatur lebar gambar asrama |
| 4 | border-image-repeat Digunakan untuk mengatur gambar asrama sebagai bulat, berulang, dan membentang |
Contoh
Berikut adalah contoh yang menunjukkan untuk mengatur gambar sebagai perbatasan untuk elemen.
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -