要素の隅にのみ表示される CSS 境界線を作成するにはどうすればよいですか?

境界線のジレンマ: 角の境界線のみを表示する

要素の角のみに限定された境界線を作成する方法を探している場合は、CSS を使用してください。カバーされています。以下では、「マスキング」として知られる手法を使用した解決策を説明します。

このアプローチには、要素全体の境界線を定義し、マスクを適用して角を除いて境界線を選択的に非表示にすることが含まれます。これは、conic-gradient() 関数と Linear-gradient() 関数を使用して実現できます。

その方法は次のとおりです。

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

conic-gradient()隅を除いて境界線を隠すグラデーションを作成しますが、linear-gradient() は境界線と画像の間のギャップが確実に残るようにします。

--s 値を調整することで、角の境界線のサイズを制御できます。上の例では、サイズが 50 ピクセルに設定されており、鋭い角が得られます。

このテクニックをプロジェクトに組み込んで、画像やその他の要素の角を強調する視覚的に魅力的な境界線を作成できます。

以上が要素の隅にのみ表示される CSS 境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。