Kotak sempadan bucu lengkung CSS

Jadi kita akan bermula dengan memasukkan empat gambar melengkung pada setiap bucu kekotak kita menggunakan CSS:

Dan ini merupakan aturcara untuk HTML:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Kekotak bersempadan dengan bucu melengkung. Kredit kepada Kripkorn Studios
</div></div></div></div>

Dan ini pula adalah arahan CSS:

.bl {background: url(bl.gif) 0 100% no-repeat; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

Sekiranya anda baru membaca tutorial ini dan masih tertanya-tanya, sila rujuk artikel sebelum ini: www.kripkornstudios.com.my/CSS/kotak-bucu-lengkung-dengan-css

Memasukkan sempadan kekotak

Rasa merasakan kebanyakan dari anda semua sememangnya sudah biasa dengan arahan CSS border, jadi cuba kita masukkan arahan ini pada elemen pertama lapisan tadi.

.bl { background: url(bl.gif) 0 100% no-repeat; border: 1px solid #e68200 }

Ini hasilnya:

Hehehe.. nampak macam pelik jer kan. Tapi apa yang menyebabkan ia tidak kelihatan seperti yang kita mahukan? Kita sudah pun memasukkan atribut border pada elemen <div> yang betul, tetapi hasilnya sangat berlainan seperti yang kita harapkan. Masalah ini timbul kerana kesemua elemen-elemen bucu itu berada di dalam sempadan dan bukan DI ATAS sempadan. Keadaan ini kita akan atasinya dengan langkah-langkah berikut.

Jalan penyelesaian: Tambahkan lagi gambar

Nampak gaya kita tidak boleh menggunakan arahan border lagi sebaliknya kita berubah ke langkah lain dengan menghasilkan satu lagi gambar yang bersaiz 1px x 1px ( ) Perhatikan betul-betul dan pasti anda akan nampak gambar ini dan saya namakan gambar ini sebagai dot.gif. Kita akan cuba hasilkan garisan sempadan dengan menggunakan gambar ini bagi menggantikan arahan border CSS melalui arahan background.

Pertama, kita buangkan dahulu arahan border sebelum ini:

Kemudian kita akan hasilkan satu garisan oren di sepanjang bahagian atas kekotak. Seperti biasa, kita akan masukkan elemen <div> yang baru iaitu:

<div class="t"><div class="bl"><div  class="br"><div class="tl"><div class="tr">
Kekotak bersempadan dengan bucu melengkung. Kredit kepada Kripkorn Studios
</div></div></div></div></div>

Dan juga arahan CSS yang baru:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}

Rujuk kembali arahan CSS ini, saya menggunakan arahan repeat-x untuk memberitahu pelayar supaya ulangkan dot.gif ini berulang-ulang sepanjang 20em secara mendatar. Nilai kedudukan telah saya setkan kepada 0 0 supaya ianya bermula dari atas-kiri kekotak kita. Perhatikan juga bahawa kita hasilkan elemen <div> di bahagian paling luar supaya elemen di dalamnya akan menindih garisan tadi dan terhasil seperti ini:

Sempadan Yang Seterusnya

Sekarang kita hanya perlu arahkan supaya gambar dot.gif tadi dijalankan sebanyak 3 kali lagi bagi melengkapkan kesan kekotak kita. Tiga arahan tersebut akan hasilkan garisan di bahagian kiri, kanan dan bawah. Seperti biasa, hasilkan 3 lagi elemen <div> yang baru seperti ini:

<div class="t"><div class="b"><div  class="l"><div class="r">
  <div class="bl"><div  class="br"><div class="tl"><div class="tr">
  Kekotak bersempadan dengan bucu melengkung. Kredit kepada Kripkorn Studios
  </div></div></div></div> </div></div></div></div>

Dan jangan lupa 3 arahan baru dalam CSS:

.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}

Dalam 3 arahan baru CSS ini, saya telah gunakan arahan pengulangan yang berlainan pada sesetengah elemen. Untuk ulangan secara mendatar, iaitu untuk garisan bawah, saya gunakan repeat-x manakala untuk ulangan secara menegak iaitu dibahagian kiri dan kanan garisan, saya gunakan arahan repeat-y. Kedudukan gambar perlu diperhatikan supaya kedudukan yang tepat di mana garisan akan mula dibina. Cuba perhatikan dan fahamkan.

Setelah itu anda akan dapati kesan yang terhasil adalah seperti ini:

Berhati-hati Dengan Susunan Elemen DIV

Kekotak dengan sempadan ini akan terhasil SEKIRANYA elemen-elemen gambar untuk bucu melengkung dijalankan SELEPAS elemen-elemen garisan mendatar dan menegak di dalam aturcara HTML. Ini kerana setiap elemen baru <div> akan menindih elemen <div> yang sebelumnya dan dalam kes ini, kita mahukan elemen bucu menindih elemen garisan sempadan.

Dengan hasilkan elemen garisan sempadan terlebih dahulu, kita akan hasilkan kekotak dengan bucu berpetak. Kemudian, jika anda perasan bahawa elemen gambar bucu kita pada bahagian luarnya adalah berwarna putih dan bila dijalankan, kawasan yang berwarna putih itu akan menutup garisan bucu berpetak dan menyambungkan garisan lengkung yang kelihatan dengan garisan sempadan yang masih kelihatan. Inilah yang dikatakan manipulasi kesan gambar.

Akhirnya...

Ini merupakan aturcara HTML kita:

<div class="t"><div class="b"><div class="l"><div class="r">
  <div class="bl"><div class="br"><div class="tl"><div class="tr">
  Kekotak bersempadan dengan bucu melengkung. Kredit kepada Kripkorn Studios
  </div></div></div></div>
</div></div></div></div

Dan ini pula arahan CSS:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

Alternatif lain... Tetapi...

Sebenarnya, terdapat alternatif lain tanpa menggunakan sebarang gambar yang memudahkan kita untuk menghasilkan bucu melengkung kepada kekotak bersempadan tetapi cara ini hanya boleh diaplikasikan kepada pengguna yang menggunakan MOZILLA dan SAFARI sahaja.

Masukkan arahan CSS ini pada elemen <div> dengan diikuti arahan border:

.kekotak {
background-color: #cccccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
padding: 10px;
}

Dan ini pula arahan untuk HTML:

<div class="kekotak">
Kekotak bersempadan dengan bucu melengkung. Kredit kepada Kripkorn Studios
</div>

Masalah ini akan diselesaikan selepas CSS3 diaplikasikan sepenuhnya dengan kehadiran atribut border-radius yang disokong oleh semua jenis pelayar.