マスク画像を使用して CSS で角のみの境界線を作成するにはどうすればよいですか?

CSS を使用してコーナーのみの境界線を実現する

視覚的に魅力的なデザインを作成する場合、境界線の追加は不可欠です。ただし、要素の角にのみ境界線が必要な場合はどうすればよいでしょうか?これは、CSS の革新的な使用によって実現できます。

課題

角のみの境界線を作成するには、複数の境界線を使用して正確に配置できます。ただし、このアプローチは実装が面倒で複雑になる可能性があります。

解決策

より洗練された解決策には、マスク イメージの使用が含まれます。その仕組みは次のとおりです:

1. 実線の境界線を作成します: まず、border プロパティを使用して実線の境界線を定義します。
2. マスク画像を使用します: 次に、-webkit-mask プロパティを使用して円錐グラデーション マスクを適用します。このマスクは、指定された角を除くすべての境界線を隠します。
3. パディングの追加: 境界線とコンテンツの間にギャップを作成するには、padding プロパティを使用してパディングを追加します。
4. コーナー サイズの設定: マスク内の --s 変数を調整してコーナーのサイズをカスタマイズします定義。

サンプル コード

テクニックを示すコード スニペットの例を次に示します。

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

この CSS テクニックを使用すると、きれいで視覚的に魅力的なコーナーのみの境界線を簡単に実現できます。

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