Shapes atau bentuk CSS memungkinkan kita untuk membuat tata letak yang menarik dan unik dengan mendefinisikan bentuk geometris, gambar, dan gradien yang dapat mengalir konten teks. Pelajari cara menggunakannya dalam tutorial ini.

inset

Sejauh ini kami hanya berurusan dengan bentuk bundar, tetapi kami dapat mendefinisikan segi empat inset dengan fungsi inset ().

 

Dalam contoh ini, kami akan membuat persegi panjang 300px kali 300px, dan memasangnya dengan 75px di semua sisi. Ini akan memberi kita 150px x 150px dengan 75px ruang di sekitarnya.

Kita dapat melihat bahwa persegi panjang adalah inset, dan teks mengabaikan area inset.

Bentuk inset () juga dapat mengambil radius batas dengan parameter bundar, dan teks akan menghormati sudut-sudut bulat, seperti contoh ini dengan 25px di semua sisi dan pembulatan 75px.

 

 

Seperti padding atau margin shorthand, nilai inset akan menerima nilai kiri bawah kanan atas dalam urutan searah jarum jam (inset (25px 25px 25px 25px)), dan hanya menggunakan nilai tunggal akan membuat keempat sisi sama (inset (25px)).