CSS で角のみの境界線を作成するにはどうすればよいですか?

CSS で隅の境界線を作成する

CSS では、要素の隅にのみ境界線を表示することで、独特の外観を実現することができます。この効果は、デザインで装飾的なフレームを作成したり、特定の領域を強調したりするためによく使用されます。

CSS ソリューション

コーナーのみの境界線を作成するコード スニペットは次のとおりです:

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

説明

このソリューションは、 -webkit-mask プロパティを使用して円錐形のグラデーションを作成します。グラデーションは 2 つの異なるカラー ストップで定義されます。1 つはコーナー (75%)、もう 1 つは先頭 (0%) です。このマスクを適用すると、角を除いて境界線が効果的に隠されます。

変更

角のサイズを調整するには、 -- の値を変更するだけです。変数。さらに、必要に応じて枠線の太さと色をカスタマイズできます。

代替ソリューション

PureCSS などの一部の CSS ライブラリは、事前に角のみの境界線用の CSS クラスを構築しました。このアプローチにより、コードがさらに簡素化されます。

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

border-corner-only クラスを使用して要素内に画像をラップすることで、複雑なマスキング手法を使用せずに角の境界線を簡単に適用できます。

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