Gambar CSS3 Border
Dengan CSS3 border-image properti, Anda dapat mengatur gambar yang akan digunakan sebagai perbatasan sekitar elemen.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, -moz- , atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image Properti
CSS3 border-image properti memungkinkan Anda untuk menentukan gambar yang akan digunakan sebagai pengganti perbatasan yang normal sekitar elemen.
Properti ini memiliki tiga bagian:
- gambar untuk digunakan sebagai perbatasan
- Dimana untuk mengiris gambar
- Menentukan apakah bagian tengah harus diulang atau diregangkan
Kami akan menggunakan gambar berikut (disebut "/css/border.png"):
The border-image properti mengambil gambar dan irisan menjadi sembilan bagian, seperti papan tic-tac-toe. Kemudian menempatkan sudut di sudut-sudut, dan bagian tengah yang berulang atau membentang seperti yang Anda tentukan.
Catatan: Untuk border-image untuk bekerja, elemen juga membutuhkan border set properti!
Di sini, bagian tengah gambar diulang untuk menciptakan perbatasan:
Gambar sebagai perbatasan!
Berikut adalah kode:
Contoh
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Cobalah sendiri " Di sini, bagian tengah gambar yang ditarik untuk membuat perbatasan:
Gambar sebagai perbatasan!
Berikut adalah kode:
Contoh
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Cobalah sendiri "  | Tip: The border-image properti sebenarnya adalah properti singkat untuk border-image-source , border-image-slice , border-image-width , border-image-outset dan border-image-repeat properti. |
|---|
CSS3 border-image - Nilai Iris Berbeda
nilai slice yang berbeda benar-benar mengubah tampilan perbatasan:
Contoh 1:
border-image: url(border.png) 50 putaran;
Contoh 2:
border-image: url(border.png) 20% putaran;
Contoh 3:
border-image: url(border.png) 30% putaran;
Berikut adalah kode:
Contoh
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} Cobalah sendiri " Uji Diri dengan Latihan!
CSS3 Properti Perbatasan
| Milik | Deskripsi |
|---|---|
| border-image | Sebuah properti singkat untuk setting semua border-image-* properti |
| border-image-source | Menentukan path ke gambar yang akan digunakan sebagai perbatasan |
| border-image-slice | Menentukan bagaimana mengiris gambar perbatasan |
| border-image-width | Menentukan lebar dari gambar perbatasan |
| border-image-outset | Menentukan jumlah dimana area gambar perbatasan melampaui kotak perbatasan |
| border-image-repeat | Menentukan apakah gambar perbatasan harus diulang, bulat atau diregangkan |