CSS3 Border
CSS3 Border
Dengan CSS3, Anda dapat membuat sudut bulat, menambahkan kotak bayangan, dan sebagai citra perbatasan tanpa menggunakan program desain seperti Photoshop.
Dalam bab ini, Anda akan mempelajari sifat perbatasan berikut:
- border-radius
- box-shadow
- border-image
CSS3 sudut bulat
Tambahkan fillet rumit di CSS2. Kami harus menggunakan gambar yang berbeda setiap sudut.
Dalam CSS3, sangat mudah untuk membuat sudut bulat.
Dalam CSS3 properti border-radius digunakan untuk membuat sudut bulat:
kotak CSS3 bayangan
Properti CSS3 box-shadow digunakan untuk menambahkan bayangan:
gambar perbatasan CSS3
Dengan properti CSS3 border-image, Anda dapat menggunakan gambar untuk membuat perbatasan:
Menggunakan gambar untuk membuat perbatasan div:
contoh
Menggunakan gambar untuk membuat div perbatasan
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Coba »
Properti Border baru
milik | penjelasan | CSS |
---|---|---|
border-image | Mengatur properti singkatan perbatasan semua gambar. | 3 |
border-radius | Satu untuk menetapkan semua empat perbatasan - * - properti radius singkatan | 3 |
box-shadow | Melampirkan satu atau lebih drop-down box bayangan | 3 |