Rumah >hujung hadapan web >tutorial css >Sifat mana dalam CSS yang menentukan lebar sempadan?
Sifat mana dalam CSS yang menentukan lebar sempadan?
- WBOYke hadapan
- 2023-08-29 21:09:03926semak imbas
Dalam CSS, sifat "sempadan" digunakan untuk menggunakan sempadan pada mana-mana elemen HTML, seperti div. Selain itu, kami juga boleh menetapkan sempadan, warna, lebar dan gaya lain yang berbeza.
Dalam tutorial ini, kita akan mempelajari cara yang berbeza untuk menetapkan lebar sempadan sesuatu elemen. Selain itu, kita akan belajar untuk menetapkan lebar sisi yang berbeza bagi sesuatu elemen.
Gunakan sifat CSS lebar sempadan untuk menetapkan lebar sempadan
Sifat CSS "lebar sempadan" digunakan untuk menentukan lebar sempadan. Pengguna boleh menetapkan lebar sisi yang berbeza melalui empat nilai ini. Walau bagaimanapun, tiga nilai terakhir adalah pilihan.
Menggunakan satu nilai untuk lebar sempadan akan menggunakan lebar sempadan yang sama pada keempat-empat sisi. Jika kita melepasi dua nilai, ia akan menganggap nilai pertama sebagai lebar sempadan atas dan bawah dan nilai kedua sebagai lebar sempadan kiri dan kanan.
Tatabahasa
Pengguna boleh menggunakan sifat CSS "lebar sempadan" untuk menetapkan lebar sempadan mengikut sintaks di bawah.
border-width: top right bottom left; border-width: top-bottom right-left; border-width: top-bottom-right-left;
Dalam sintaks di atas, pertama, kami mentakrifkan lebar yang berbeza untuk semua sisi. Selepas itu, kami mentakrifkan lebar yang berbeza untuk bahagian atas, bawah dan kiri dan kanan, dan kemudian menentukan lebar sempadan yang sama untuk semua sisi.
Contoh
Dalam contoh di bawah, kami telah mencipta elemen div dan menetapkan lebar sempadan "5px" kepada elemen sempadan. Dalam output, pengguna boleh melihat sempadan merah gaya putus-putus.
<html>
<style>
div {
border-style: dashed;
border-width: 5px;
border-color: red;
width: 600px;
height: 100px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet. </h3>
<div>
Welcome to the world of CSS.
</div>
</body>
</html>
Contoh
Dalam contoh di bawah, kami menggunakan sifat CSS "lebar sempadan" untuk menetapkan lebar sempadan yang berbeza untuk keempat-empat sisi elemen. Kami menetapkan lebar "5px" untuk sempadan atas, lebar "10px" untuk sempadan kanan, lebar "15px" untuk sempadan bawah dan lebar "20px" untuk sempadan kiri
Dalam output, pengguna boleh memerhatikan lebar sempadan yang berbeza pada setiap sisi elemen div.
<html>
<style>
div {
border-style: solid;
border-width: 5px 10px 15px 20px;
border-color: red;
width: 600px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet </h3>
<div>
<p> top border - 5px; </p>
<p> right border - 10px; </p>
<p> bottom border - 15px; </p>
<p> left border - 20px; </p>
</div>
</body>
</html>
Gunakan sifat CSS sempadan untuk menetapkan lebar sempadan
Sifat CSS "sempadan" mengambil tiga nilai. Nilai pertama menentukan lebar sempadan, nilai kedua menentukan gaya sempadan, dan nilai ketiga menentukan warna sempadan.
Di sini kita akan fokus pada nilai pertama yang menetapkan lebar sempadan.
Tatabahasa
Pengguna boleh menetapkan lebar sempadan menggunakan sifat CSS "sempadan" mengikut sintaks berikut.
border: 1rem solid blue;
Contoh
Dalam contoh di bawah, nilai "1rem Solid blue" bagi sifat CSS "sempadan" menetapkan sempadan 1rem lebar, merah dan gaya warna pepejal. Untuk menukar lebar sempadan kita perlu menukar nilai pertama.
<html>
<style>
div {
border: 1rem solid blue;
width: 500px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border CSS property </i> to set the border width of the elemenet </h3>
<div>
You are on the TutorialsPoint website!
</div>
</body>
</html>
Contoh
Dalam CSS, kami juga boleh menetapkan lebar sempadan menggunakan nilai "nipis", "sederhana" dan "tebal". Nilai 'nipis' menetapkan sempadan nipis, nilai 'sederhana' menetapkan lebar sempadan yang lebih luas daripada sempadan 'nipis' dan nilai 'tebal' menetapkan lebar yang lebih luas daripada 'sederhana'.
Dalam contoh di bawah, kami telah mengambil tiga elemen div dan memberikan lebar sempadan yang berbeza menggunakan sifat CSS "sempadan" yang pengguna boleh perhatikan dalam output.
<html>
<style>
p {
width: 200px;
height: 100px;
margin: 10px;
}
.first {
border: thin solid black;
}
.second {
border: medium solid black;
}
.third {
border: thick solid black;
}
</style>
<body>
<h3> Use the <i> border CSS property </i> to set the border width of the HTML element </h3>
<p class="first"> Thin border </p>
<p class="second"> Medium border </p>
<p class="third"> Thick border </p>
</body>
</html>
Tetapkan lebar sempadan bahagian tertentu
Sifat CSS “border-top-width” membolehkan pengguna menetapkan lebar sempadan atas. Di samping itu, pengguna boleh menggunakan sifat CSS "lebar-kanan-sempadan", "lebar-bawah-sempadan" dan "lebar-kiri sempadan" untuk menetapkan lebar sempadan kanan elemen, sempadan bawah dan sempadan kiri masing-masing.
Tatabahasa
Pengguna boleh menggunakan sifat CSS yang berbeza untuk menetapkan lebar sempadan sisi berbeza mengikut sintaks di bawah.
border-top-width: 3px; border-right-width: 6px; border-bottom-width: 9px; border-left-width: 12px;
Contoh
Dalam contoh di bawah, kami telah mencipta empat elemen div berbeza. Kami menetapkan lebar sempadan atas untuk elemen div pertama, lebar sempadan kanan untuk elemen div kedua, dan lebar sempadan bawah dan kiri untuk elemen ketiga dan keempat.
<html>
<style>
div {
width: 500px;
height: 100px;
margin: 10px;
}
.one {
border-top-width: 3px;
border-style: dotted;
border-color: red;
}
.two {
border-right-width: 6px;
border-style: solid;
border-color: green;
}
.three {
border-bottom-width: 9px;
border-style: dashed;
border-color: blue;
}
.four {
border-left-width: 12px;
border-style: double;
border-color: yellow;
}
</style>
<body>
<h2> Set the border width for the different sides of the element</h2>
<div class="one"> First div </div>
<div class="two"> Second div </div>
<div class="three"> Third div </div>
<div class="four"> Fourth div </div>
</body>
</html>
Kesimpulan
Pengguna belajar menggunakan pelbagai sifat CSS untuk menetapkan lebar sempadan elemen HTML. Kami belajar menggunakan sifat CSS "lebar sempadan" dan "sempadan" untuk menetapkan lebar sempadan. Selain itu, kami belajar untuk menetapkan lebar sempadan yang berbeza untuk sisi elemen yang berbeza.
Atas ialah kandungan terperinci Sifat mana dalam CSS yang menentukan lebar sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!