Trik Mengenai Border Inset

Border inset memang terlihat menarik, bagaimana cara anda dalam membuat border inset..?? dari kebanyakan aku lihat rata-rata sobat2 menggunakan box-shadow. border inset sebenarnya sudah dibuat oleh w3 tapi aku pernah coba gak perfect kalau di firefox, tapi aku coba pake firefox versi terbaru udah perfect. sewaktu dulu aku bingung bagaimana membuat border terlihat inset aku lihat source kode sebuah blog dan ternyata dia memanfaatkan box-shadow sebagai efek agar terlihat inset.

Sebenernya ada metode lain agar border terlihat inset, cara ini gak sengaja aku temuin sewaktu membuat link list atau daftar link. kita hanya perlu memberi margin 1px lalu memberi border dengan ketebalan 1px juga. contohnya dibawah ini.



Mungkin gak terlalu kelihatan ya insetnya tapi kalau diperhatikan bener2 pasti terlihat insetnya. pada gambar diatas aku memberi background ul agak terang, lalu memberi jarak li margin-bottom: 1px dan memberi border-bottom: 1px pada li dengan warna agak gelap dikit, nah hasilnya terlihat seperti inset kan. untuk masalah warna bisa anda sesuaikan sendiri agar bisa terlihat inset. cara ini aku terapin untuk fix tampilan dibrowser aja walaupun cara ini tidak selalu aku gunakan.