Perbatasan dan garis besar CSS adalah alat yang berharga bagi perancang web yang ingin menambahkan gaya ke situs. Mereka mudah digunakan setelah Anda mengetahui cara kerjanya dan cukup serbaguna untuk memenuhi berbagai kebutuhan. Mari kita lihat batas CSS untuk melihat di mana Anda harus memulai.
Apa Perbedaan Antara Perbatasan dan Garis Besar di CSS?
Garis besar dan batas CSS membentuk dua lapisan luar model kotak CSS, duduk di antara perbatasan dan margin. Meskipun properti ini serupa, mereka memiliki nilai dan tujuan yang berbeda.
Pertama, garis besar CSS berada di luar batas. Ini berarti mereka bisa tumpang tindih dengan konten di luar elemen yang Anda terapkan. Bersamaan dengan ini, batas CSS mengubah dimensi elemen tetapi garis besarnya tidak.
Jika Anda kesulitan memvisualisasikan gaya batas dan kerangka, Anda dapat menggunakan alat pengembangan browser untuk melakukan debug mereka.
Batas CSS & Garis Besar Nilai Properti Bersama
Terlepas dari perbedaan mereka, batas dan garis besar CSS memiliki beberapa nilai yang sama. Singkatan yang Anda gunakan untuk masing-masing juga sangat mirip.
Batasan CSS & Singkatan Garis Besar
Seperti properti CSS kompleks lainnya, border dan outline memiliki steno yang tersedia. Kedua properti ini memiliki format yang sama untuk opsi steno mereka dan tampilannya seperti ini.
berbatasan: lebargayawarna;
garis besar: lebargayawarna;Ini menciptakan aturan yang terlihat seperti ini saat sedang beraksi. Namun, tentu saja, singkatan ini tidak mencakup semua nilai yang tersedia untuk properti ini.
batas: 10px biru solid;
garis besar: 20px merah pekat;Batasan singkatan CSS dan aturan garis besar ini menghasilkan batas biru tipis dengan garis tepi merah tebal.
Seperti properti CSS steno lainnya, Anda juga dapat menggunakan properti individual untuk mendapatkan hasil yang sama.
Lebar batas CSS & lebar garis besar
Lebar batas dan kerangka adalah nilai properti CSS opsional yang mengatur ketebalan batas dan kerangka yang Anda gunakan. Format untuk properti ini sama.
garis besar-lebar: 20px;
lebar batas: 10px;Perbatasan memungkinkan lebar individu diatur untuk setiap sisi elemen, tetapi garis besar tidak. Anda dapat membaca lebih lanjut tentang ini di bagian berikut.
Gaya batas CSS & gaya garis besar
Perbatasan dan garis besar CSS tersedia dalam berbagai gaya. Batas padat adalah yang paling umum, tetapi Anda bisa berkreasi dengan cara menggunakan batas dan garis luar.
border-style: solid;
outline-style: dotted;Anda dapat menemukan daftar lengkap berbagai gaya border dan outline CSS di akhir artikel ini.
Warna batas CSS & warna garis luar
Seperti properti CSS berbasis warna lainnya, batas dan garis luar menerima semua warna legal CSS. Ini termasuk kode hex, kode RGB, warna steno, dan banyak lagi.
border-color: biru;
garis-warna: #ff0000;Anda juga dapat menggunakan gradien warna saat bekerja dengan batas dan garis tepi CSS.
Nilai Properti Perbatasan CSS
Seiring dengan nilai properti bersama, batas dan garis besar juga memiliki nilai unik untuk dijelajahi. Perbatasan CSS memiliki dua properti unik yang patut dipelajari.
Radius batas CSS
Menambahkan radius ke batas elemen memberi Anda banyak kendali atas bentuknya. Setiap sudut elemen dapat memiliki radius yang berbeda, dan properti ini dapat disetel meskipun gaya batas tidak disetel ke nol.
border-radius: 20px;Anda dapat menetapkan satu nilai untuk mengubah radius semua sudut.
Anda juga dapat membagi sudut menjadi kelompok kiri atas/kanan bawah dan kanan atas/kiri bawah.
border-radius: 10px 20px;Ini membuatnya mudah untuk membuat bentuk yang menarik dengan elemen HTML Anda.
Terakhir, Anda dapat mengatur setiap sudut agar memiliki radiusnya sendiri.
border-radius: 10px 20px 30px 40px;Nilai-nilai ini berlaku searah jarum jam mulai dari pojok kiri atas.
Properti Sisi Perbatasan CSS
Tidak seperti kerangka, Anda dapat menyetel setiap sisi batas agar memiliki nilai unik untuk banyak propertinya. Hal ini memungkinkan untuk memberikan lebar yang berbeda pada setiap sisi elemen Anda.
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;Anda juga dapat mengatur gaya batas CSS independen untuk setiap sisi elemen.
border-left-style: solid;
border-right-style: dotted;
border-top-style: putus-putus;
gaya batas bawah: dobel;Dan Anda dapat mengubah warna setiap sisi jika Anda mau.
border-left-style: biru;
gaya batas kanan: #ff0000;
gaya border-top: #00ff00;
border-bottom-style: rgb (0, 0, 255);Sisi batas CSS berfungsi dengan singkatan biasa untuk digabungkan seperti ini.
border-left: 10px solid blue;
perbatasan-kanan: 20px bertitik #00ff00;
batas atas: 30px putus-putus #ff0000;
perbatasan-bawah: 40px dobelrgb(0, 0, 255);Nilai Properti Outline CSS
Seperti batas CSS, garis besar memiliki properti uniknya sendiri; outline-offset.
Garis besar-offset CSS
Menambahkan offset ke garis besar menciptakan ruang antara dirinya dan elemen utama. Offset ini harus sama untuk setiap sisi kerangka, dan properti hanya menerima satu nilai.
outline-offset: 10px;Ini bisa menjadi cara yang rapi untuk memanfaatkan batas ketiga untuk elemen Anda yang cocok dengan warna latar belakang Anda.
Batas CSS & Gaya Garis Besar
Baik batas maupun garis besar membutuhkan gaya untuk berfungsi. Ada sepuluh gaya yang tersedia untuk dipilih, termasuk batas yang tidak muncul sama sekali.
border-style: solid;
border-style: dotted;
border-style: putus-putus;
border-style: groove;
gaya perbatasan: punggungan;
gaya perbatasan: dobel;
border-style: inset;
border-style: awal;
border-style: tersembunyi;
border-style: tidak ada;Perbatasan berbagi gaya yang sama dengan kerangka, hanya dengan gaya kerangka yang ditetapkan sebagai properti.
Cara Menggunakan Perbatasan & Garis Besar CSS
Garis besar dan batas adalah alat desain yang bagus untuk pembuat situs web. Anda dapat menentukan tampilan dan nuansa situs web Anda dengan properti CSS ini, tetapi Anda harus kreatif.
