简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  详解CSS3 RGBA色彩模式使用实例代码

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

高洛峰
高洛峰asal
2017-03-13 17:36:182065semak imbas

这篇文章主要以设计带有阴影边框的表单为例，为大家介绍了CSS3 RGBA色彩模式使用方法，感兴趣的小伙伴们可以参考一下

RGBA色彩模式是RGB色彩模式的扩展，在红，蓝，绿三原色的基础上增加了不透明度参数。语法如下：

rgba（r,g,b,254795c8a5a92f0c60f5c5a2c5d226d9）

其中r,g,b表示红色，蓝色，绿色三种原色所占的比重。其值可以使整数或者百分数，正整数值的取值范围为0~255，百分数值的取值范围为0.0%~100.0%,超出范围的数值将被截止其最接近的取值极限。注意，并非所有的浏览器都支持使用百分数值。第四个参数0e647f3c91b49626efa3e2d74020a418表示不透明度，取值在0到1之间。

实例：设计带有阴影边框的表单

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


演示效果：

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

Atas ialah kandungan terperinci 详解CSS3 RGBA色彩模式使用实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：利用CSS3实现千变万化的文字阴影text-shadow效果设计Artikel seterusnya：实现CSS3不透明度完整代码

Artikel berkaitan

Lihat lagi