Home >Web Front-end >CSS Tutorial >Detailed explanation of CSS3 RGBA color mode usage example code

Detailed explanation of CSS3 RGBA color mode usage example code

高洛峰Original: 2017-03-13 17:36:182124browse

This article mainly takes the design of a form with a shadow border as an example to introduce the use of CSS3 RGBA color mode. Interested friends can refer to it

RGBA color mode is RGB color The expansion of the mode adds opacity parameters based on the three primary colors of red, blue, and green. The syntax is as follows:

rgba（r,g,b,254795c8a5a92f0c60f5c5a2c5d226d9）

where r,g,b represents the three primary colors of red, blue and green proportion. Its value can be integer or percentage. The value range of positive integer value is 0~255, and the value range of percentage value is 0.0%~100.0%. Values outside the range will be cut off to the nearest Value limit. Note that not all browsers support using percentage values. The fourth parameter 0e647f3c91b49626efa3e2d74020a418 represents opacity, with a value between 0 and 1.

Example: Design a form with a shadow border

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

Demonstration effect:

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

The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of Detailed explanation of CSS3 RGBA color mode usage example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use CSS3 to achieve ever-changing text shadow text-shadow effect designNext article：Use CSS3 to achieve ever-changing text shadow text-shadow effect design

See more

Detailed explanation of CSS3 RGBA color mode usage example code

Related articles