Bagaimanakah Saya Boleh Mencipta Sempadan CSS Yang Hanya Muncul di Sudut Unsur?

Membuat Sudut Sempadan Menggunakan CSS

Soalan: Adakah mungkin untuk membuat sempadan yang hanya muncul di sudut daripada sebuah elemen?

Jawapan:

Ya, adalah mungkin untuk mencapai kesan ini menggunakan gabungan teknik CSS. Mari terokai penyelesaian yang kurang intensif kod:

img {
  --s: 50px; /* Size of the corner */

  padding: 20px; /* Gap between border and image */
  border: 5px solid #B38184; /* Thickness and color of the border */

  -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;
}

Kod ini menggunakan kecerunan kon untuk mencipta kesan sempadan di sekeliling penjuru. Nilai --s menentukan saiz sudut. Sifat padding menambah jurang antara jidar dan imej.

Untuk penyesuaian, anda boleh melaraskan saiz dan warna jidar seperti yang diperlukan:

<img src="image1.png" alt="Image 1">

Kod ini akan mencipta yang lebih besar jidar dengan warna coklat muda dan sudut yang lebih bulat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sempadan CSS Yang Hanya Muncul di Sudut Unsur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!