Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So legen Sie die Transparenz des Rahmens in CSS fest

青灯夜游
Freigeben: 2023-01-05 16:12:48
Original
16363 Leute haben es durchsucht

In CSS können Sie die Rahmentransparenz über das Attribut „border-color“ und die Funktion RGBA() festlegen. Fügen Sie einfach den Stil „border-color: rgba (rot, grün, blau, Transparenzwert)“ zum Rahmenelement hinzu. border-color kann die Randfarbe festlegen und RGBA() kann die Farbtransparenz festlegen.

So legen Sie die Transparenz des Rahmens in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS legt die Transparenz des Rahmens fest

In CSS kann die Rahmentransparenz über das Attribut border-color und die Funktion RGBA() festgelegt werden.

Codebeispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        	div{
        		border:10px solid;
        		margin: 10px 0;
        	}
        </style>
    </head>
    <body>
        <div style="border-color: rgba(0,153,0,0.1);">测试文本,透明度0.1</div>
        <div style="border-color: rgba(0,153,0,0.5);">测试文本,透明度0.5</div>
        <div style="border-color: rgba(0,153,0,0.8);">测试文本,透明度0.8</div>
        <div style="border-color: rgba(0,153,0,1.0);">测试文本,透明度1.0</div>
    </body>
</html>
Nach dem Login kopieren

Rendering:

So legen Sie die Transparenz des Rahmens in CSS fest

Beschreibung: Die Eigenschaft

border-color kann die Rahmenfarbe festlegen, und die Funktion RGBA() kann die Farbtransparenz festlegen.

RGBA bedeutet (Rot-Grün-Blau-Alpha) und ist eine Erweiterung von RGB um den „Alpha“-Kanal, mit dem Sie Transparenz für Farbwerte festlegen können.

Syntax:

rgba(R,G,B,A);
Nach dem Login kopieren

Einführung in die Werte in rgba():

  • R: roter Wert. Positive Ganzzahl (0~255)

  • G: grüner Wert. Positive Ganzzahl (0~255)

  • B: blauer Wert. Positive Ganzzahl (0~255)

  • A: Transparenz. Der Wert liegt zwischen 0 und 1

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo legen Sie die Transparenz des Rahmens in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!