Bagaimana Saya Boleh Membuat Sempadan Separa dalam CSS?

Sempadan Separa dalam CSS: Ilusi Kreatif

Adalah diingini untuk membuat kotak dengan sempadan yang muncul hanya pada bahagian tertentu atau memanjang sahaja sebahagiannya melintasi tepi. Walaupun tiada sokongan langsung dalam CSS, kesan ini boleh dicapai dengan elegan melalui kaedah yang mudah dan fleksibel.

Pertimbangkan, sebagai contoh, kotak 350px lebar dengan sempadan bawah yang memanjang hanya 60px dari kiri. Ini boleh direplikasi dengan kod CSS berikut:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

Keajaiban terletak pada div:after pseudo-element. Ia mencipta kotak kosong yang diletakkan secara mutlak di bahagian bawah kotak utama. Dengan melaraskan sifat lebar dan bawah, kami boleh mengawal saiz dan kedudukan sempadan separa.

Pendekatan ini serba boleh dan berfungsi dengan baik dalam semua penyemak imbas moden. Ia tidak memerlukan sebarang penanda tambahan, yang membawa kepada kod yang bersih dan boleh diselenggara. Ia juga merosot dengan anggun dalam penyemak imbas yang tidak menyokong kedudukan: mutlak.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Sempadan Separa dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!