Sifat mana dalam CSS yang menentukan lebar sempadan?-tutorial css-php.cn

Sifat mana dalam CSS yang menentukan lebar sempadan?

WBOY

Lepaskan： 2023-08-29 21:09:03

ke hadapan

890 orang telah melayarinya

CSS 中哪个属性指定边框的宽度？

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;

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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;

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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;

Salin selepas log masuk

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>

Salin selepas log masuk

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!