Heim >Web-Frontend >CSS-Tutorial >Detaillierte Erläuterung des Beispielcodes für die Verwendung des CSS3 RGBA-Farbmodus
Detaillierte Erläuterung des Beispielcodes für die Verwendung des CSS3 RGBA-Farbmodus
- 高洛峰Original
- 2017-03-13 17:36:182121Durchsuche
In diesem Artikel wird hauptsächlich das Entwerfen eines Formulars mit einem Schattenrand als Beispiel verwendet, um die Verwendung des RGBA-Farbmodus von CSS3 vorzustellen
Der RGBA-Farbmodus ist die Erweiterung des RGB-Farbmodus Fügt Deckkraftparameter basierend auf den drei Primärfarben Rot, Blau und Grün hinzu. Die Syntax lautet wie folgt:
rgba (r,g,b,254795c8a5a92f0c60f5c5a2c5d226d9)
wobei r,g,b die drei Primärfarben von Rot darstellen , Blau- und Grünanteil. Sein Wert kann ganzzahlig oder prozentual sein. Der Wertebereich für positive Ganzzahlwerte beträgt 0,0 % bis 100,0 %. Werte außerhalb des Bereichs werden abgeschnitten bis zur nächsten Wertgrenze. Beachten Sie, dass nicht alle Browser die Verwendung von Prozentwerten unterstützen. Der vierte Parameter 0e647f3c91b49626efa3e2d74020a418 stellt die Opazität dar, mit einem Wert zwischen 0 und 1.
Beispiel: Entwerfen Sie ein Formular mit Schattenrand
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RGBA Color</title>
<style type="text/css">
input, textarea {/*统一输入域样式*/
padding: 4px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;/*设计边框阴影效果*/
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;/*兼容Mozilla类型的浏览器，如FF*/
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;/*兼容Webkit引擎，如Chrome和Safari*/
}
textarea {/*定义文本区域样式*/
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
background:url(images/form-shadow.png) no-repeat bottom right;
}
input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; }/*设计鼠标的动态效果*/
label {/*定义标签样式*/
margin-left: 10px;
color: #999999;
display:block;/*以块状显示，实现分行显示*/
}
.submit input {/*设计提交按钮的样式*/
width:auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
</style>
</head>
<body>
<form>
<p class="name">
<label for="name">姓名</label>
<input type="text" name="name" id="name" />
</p>
<p class="email">
<label for="email">邮箱</label>
<input type="text" name="email" id="email" />
</p>
<p class="web">
<label for="web">个人网址</label>
<input type="text" name="web" id="web" />
</p>
<p class="text">
<label for="text">留言</label>
<textarea name="text" id="text"></textarea>
</p>
<p class="submit">
<input type="submit" value="提交" />
</p>
</form>
</body>
</html>Demoeffekt:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für die Verwendung des CSS3 RGBA-Farbmodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!