Latest web development tutorials

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:

Ini dibulatkan perbatasan!

contoh

Tambahkan fillet dalam elemen div:

div
{
border:2px solid;
border-radius:25px;
}

Coba »

kotak CSS3 bayangan

Properti CSS3 box-shadow digunakan untuk menambahkan bayangan:


contoh

Tambahkan kotak-shadow properti di div

div
{
box-shadow: 10px 10px 5px #888888;
}

Coba »

gambar perbatasan CSS3

Dengan properti CSS3 border-image, Anda dapat menggunakan gambar untuk membuat perbatasan:

Properti border-gambar memungkinkan Anda untuk menentukan gambar sebagai perbatasan! Digunakan untuk membuat perbatasan di atas gambar asli:

Menggunakan gambar untuk membuat perbatasan div:

batas

contoh

Menggunakan gambar untuk membuat div perbatasan

div
{
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