CSS transparenter Rahmen Hintergrund-Clip-Magie

In diesem Artikel wird hauptsächlich die wunderbare Verwendung von CSS-Hintergrundclips mit transparentem Rand vorgestellt. Teilen Sie sie mit allen und hinterlassen Sie eine Notiz für sich selbst

<div Klasse="border"></div>

.Grenze {  
  Breite: 300px;  
  Höhe: 300px;  
  Hintergrund: URL("https://waiqin.oss-cn-shenzhen.aliyuncs.com/jxb-vip-ts/activitys/activitys15677540269589timg.jpg");  
  Hintergrundgröße: Abdeckung;  
  Rand links: 100px;  
  Rand: 10px durchgezogen rgba(255,255,255,.6);  
  Hintergrundclip: Polsterbox;  
}

Hintergrundclip: Polsterbox; Tastencode

Der Anfangswert der Eigenschaft „background-clip“ ist „border-box“, was bedeutet, dass der Hintergrund durch die Rahmenbox des Elements (die äußere Kante des Rahmens) abgeschnitten wird. Wenn wir nicht möchten, dass der Hintergrund in den Rahmen hineinragt, müssen wir lediglich seinen Wert auf „padding-box“ setzen, damit der Browser die Außenkante des Innenrands nutzt, um den Hintergrund abzuschneiden.

Wirkung

Ohne Hintergrundclip: Padding-Box; können wir sehen, dass das Hintergrundbild durch den halbtransparenten Rand sichtbar ist.

Nach dem Hinzufügen wird der Hintergrund am Rand abgeschnitten.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.