CSS 透明ボーダー背景クリップマジック

この記事では、CSSの透明な境界線の背景クリップの素晴らしい使い方を主に紹介し、みんなと共有し、自分自身のためにメモを残します。

<div class="border"></div>

。国境 {  
  幅: 300ピクセル;  
  高さ: 300px;  
  背景: url("https://waiqin.oss-cn-shenzhen.aliyuncs.com/jxb-vip-ts/activitys/activitys15677540269589timg.jpg");  
  背景サイズ: カバー;  
  左マージン: 100px;  
  境界線: 10px実線 rgba(255,255,255,.6);  
  背景クリップ: パディングボックス;  
}

background-clip: パディングボックス; キーコード

background-clip プロパティの初期値は border-box です。これは、背景が要素の境界ボックス (境界の外側の端) によってクリップされることを意味します。背景が境界線を侵食しないようにするには、その値を padding-box に設定するだけで、ブラウザは内側の余白の外側の端を使用して背景を切り取るようになります。

効果

background-clip: padding-box; がない場合、半透明の境界線を通して背景画像が見えることがわかります。

追加後、背景が境界で切り取られます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。