Bagaimanakah Saya Boleh Membuat Sempadan Sudut Sahaja dalam CSS?

Membuat Sempadan Sudut dengan CSS

Dalam CSS, adalah mungkin untuk mencapai rupa tersendiri dengan memaparkan sempadan hanya pada penjuru elemen. Kesan ini biasanya digunakan dalam reka bentuk untuk mencipta bingkai hiasan atau menekankan kawasan tertentu.

Penyelesaian CSS

Berikut ialah coretan kod yang mencipta sudut sahaja sempadan:

img {
  --s: 50px; /* the size on the corner */
  
  padding: 20px; /* the gap between the border and image */
  border: 5px solid #B38184; /* the thickness and color */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Penjelasan

Penyelesaian ini menggunakan sifat -webkit-mask untuk mencipta kecerunan kon. Kecerunan ditakrifkan dengan dua hentian warna yang berbeza: satu di sudut (75%) dan satu di permulaan (0%). Dengan menggunakan topeng ini, sempadan disembunyikan dengan berkesan kecuali di sudut.

Pengubahsuaian

Untuk melaraskan saiz bucu, cuma ubah suai nilai -- s pembolehubah. Selain itu, anda boleh menyesuaikan ketebalan dan warna sempadan seperti yang dikehendaki.

Penyelesaian Alternatif

Sesetengah perpustakaan CSS, seperti PureCSS, menyediakan pra- membina kelas CSS untuk sempadan sudut sahaja. Pendekatan ini memudahkan lagi kod:

img {
  border-radius: 10px;
}

.border-corner-only {
  border-width: 0px;
  border-top-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 0px;
  border-left-width: 5px;
}

Dengan membalut imej dalam elemen dengan kelas penjuru sempadan sahaja, anda boleh menggunakan sempadan sudut dengan mudah tanpa sebarang teknik penyamaran yang rumit.

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