Heim  >  Artikel  >  Web-Frontend  >  So machen Sie den Rahmen in CSS transparent

So machen Sie den Rahmen in CSS transparent

藏色散人
藏色散人Original
2021-05-13 14:50:485774Durchsuche

So machen Sie den Rahmen in CSS transparent: Erstellen Sie zunächst eine HTML-Beispieldatei. Anschließend legen Sie den Stil „border-top:10px solid rgba(200,200,200,0,25)“ fest Machen Sie das angegebene Der Rand ist transparent.

So machen Sie den Rahmen in CSS transparent

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer

Transparenz wird im Allgemeinen als Farbattribut angesehen, es gibt jedoch keinen solchen Wert. Wir haben den besten Weg gefunden, div transparent zu machen. RGBA fügt Parameter hinzu, um die Alpha-Transparenz basierend auf RGB zu steuern. Es gibt drei Parameter: R (rot), G (grün) und B (blau). Der positive ganzzahlige Wertebereich ist: 0 – 255 oder der prozentuale Wertebereich ist: 0,0 % – 100,0 %. Werte außerhalb des Bereichs werden auf die nächste Wertegrenze gerundet. Nicht alle Browser unterstützen die Verwendung von Prozentwerten. Ein Parameter, dessen Wert zwischen 0 und 1 liegt, darf nicht negativ sein.

RGBA-Syntaxbeispiel:

.div {background: rgba(200,200,200,0.5);}

Als nächstes demonstrieren Sie, wie Sie den Rahmen transparent machen:

Legen Sie den folgenden Stil für das Div fest:

div {    width: 100px;    
height:100px;    border-top:10px solid  rgba(200,200,200,0.25);    border-right:10px solid  rgba(200,200,200,0.5);    border-bottom: 10px solid  rgba(200,200,200,0.75);    border-left:10px solid  rgba(200,200,200,1);}

Der Anzeigeeffekt ist Wie in der Abbildung dargestellt, weist jede Seite eine unterschiedliche Transparenz auf. Wenn wir die Transparenz des Rahmens festlegen müssen, geben Sie bei Bedarf einfach den letzten Wert zwischen 0 und 1 ein.

So machen Sie den Rahmen in CSS transparentLernvideo-Sharing:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo machen Sie den Rahmen in CSS transparent. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn