Maison >interface Web >tutoriel CSS >Explication détaillée de l'exemple de code d'utilisation du mode couleur CSS3 RGBA
Explication détaillée de l'exemple de code d'utilisation du mode couleur CSS3 RGBA
- 高洛峰original
- 2017-03-13 17:36:182124parcourir
Cet article prend principalement comme exemple la conception d'un formulaire avec une bordure ombrée pour présenter l'utilisation du mode de couleur CSS3 RGBA. Les amis intéressés peuvent s'y référer
Le mode de couleur RGBA est la couleur RVB L'extension du mode. ajoute des paramètres d'opacité basés sur les trois couleurs primaires que sont le rouge, le bleu et le vert. La syntaxe est la suivante :
rgba (r,g,b,254795c8a5a92f0c60f5c5a2c5d226d9)
où r,g,b représentent les trois couleurs primaires du rouge , proportion de bleu et de vert. Sa valeur peut être entier ou pourcentage. La plage de valeurs de la valeur entière positive est de 0 à 255, et la plage de valeurs de la valeur en pourcentage est de 0,0 % à 100,0 %. à la limite de valeur la plus proche. Notez que tous les navigateurs ne prennent pas en charge l'utilisation de valeurs en pourcentage. Le quatrième paramètre 0032f1cb5e2ca9320c03aa4b207d2d29 représente l'opacité, avec une valeur comprise entre 0 et 1.
Exemple : Concevoir un formulaire avec une bordure ombrée
<!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>Effet démo :
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!