Detaillierte Erläuterung des Beispielcodes für die Verwendung des CSS3 RGBA-Farbmodus-CSS-Tutorial-php.cn

Detaillierte Erläuterung des Beispielcodes für die Verwendung des CSS3 RGBA-Farbmodus

高洛峰

Freigeben： 2017-03-13 17:36:18

Original

2068 Leute haben es durchsucht

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

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

Nach dem Login kopieren

Demoeffekt:

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

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!