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

Dilema Sempadan: Memaparkan Sempadan Sudut Sahaja

Jika anda telah mencari cara untuk mencipta garisan sempadan yang terhad secara eksklusif pada penjuru elemen, CSS telah melindungi anda. Di bawah, kami akan membimbing anda melalui penyelesaian menggunakan teknik yang dikenali sebagai "penutup".

Pendekatan ini melibatkan penentuan sempadan untuk keseluruhan elemen, kemudian menggunakan topeng untuk menyembunyikan sempadan secara terpilih kecuali penjuru. Ini boleh dicapai dengan bantuan fungsi conic-gradient() dan linear-gradient().

Begini cara anda boleh melakukannya:

img {
  --s: 50px; /* Adjust this value to change the corner size */
  
  padding: 20px; /* Modify this value to alter the gap between the border and image */
  border: 5px solid #B38184; /* Change the border thickness and color as needed */
  -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;
}

The conic-gradient() mencipta kecerunan yang menyembunyikan sempadan kecuali di sudut, manakala kecerunan linear() memastikan bahawa jurang antara sempadan dan imej kekal telus.

Dengan melaraskan nilai --s, anda boleh mengawal saiz sempadan sudut. Dalam contoh di atas, saiz ditetapkan kepada 50px, memberikan anda sudut tajam.

Anda kini boleh memasukkan teknik ini ke dalam projek anda untuk mencipta sempadan yang menarik secara visual yang menekankan sudut imej anda atau elemen lain.

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!