Explication détaillée de l'exemple de code d'utilisation du mode couleur CSS3 RGBA-tutoriel CSS-php.cn

Explication détaillée de l'exemple de code d'utilisation du mode couleur CSS3 RGBA

高洛峰

Libérer： 2017-03-13 17:36:18

original

2092 Les gens l'ont consulté

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,)

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 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>

Copier après la connexion

Effet démo :

详解CSS3 RGBA色彩模式使用实例代码