Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Membuat Sempadan Lebih Kecil Daripada Lebar Div Saya Menggunakan CSS?

Bagaimanakah Saya Boleh Membuat Sempadan Lebih Kecil Daripada Lebar Div Saya Menggunakan CSS?

Susan Sarandon
Susan Sarandonasal
2024-12-15 11:17:10264semak imbas

How Can I Create a Border Smaller Than My Div's Width Using CSS?

Sempadan Kurang Daripada Lebar Div: Penyelesaian Menggunakan Pseudoelements

Dalam HTML dan CSS, dimensi elemen div boleh ditetapkan menggunakan sifat lebar. Saiz sempadan boleh ditetapkan menggunakan harta sempadan. Walau bagaimanapun, jika anda ingin menetapkan sempadan yang lebih kecil daripada lebar div, pendekatan langsung tidak akan mencukupi.


Satu penyelesaian ialah menggunakan unsur pseudo CSS. Pseudoelement :before boleh ditambah pada div dan diletakkan secara mutlak. Ini membolehkan penciptaan elemen yang memanjang dari bahagian bawah div dan hanya selebar yang diingini.

div {
  width: 200px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: #eee;
}

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 50%; /* or 100px */
  border-bottom: 1px solid magenta;
}


Pendekatan ini berkesan mewujudkan sempadan di bahagian bawah div yang hanya selebar seperti yang dinyatakan dalam sifat lebar bagi :before unsur pseudo.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan Lebih Kecil Daripada Lebar Div Saya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn