首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3 RGBA色彩模式使用实例讲解

Posted in HTML / CSS onApril 26, 2016

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

rgba（r,g,b,<opaciy>）

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>RGBA Color</title>  
  6. <style type="text/css">  
  7. input, textarea {/*统一输入域样式*/   
  8.     padding: 4px;   
  9.     border: solid 1px #E5E5E5;   
  10.     outline: 0;   
  11.     font: normal 13px/100% Verdana, Tahoma, sans-serif;   
  12.     width: 200px;   
  13.     background: #FFFFFF;   
  14.     box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;/*设计边框阴影效果*/   
  15.     -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;/*兼容Mozilla类型的浏览器，如FF*/   
  16.     -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;/*兼容Webkit引擎，如Chrome和Safari*/     
  17. }   
  18. textarea {/*定义文本区域样式*/   
  19.     width: 400px;   
  20.     max-width: 400px;   
  21.     height: 150px;   
  22.     line-height: 150%;   
  23.     background:url(images/form-shadow.png) no-repeat bottom right;   
  24. }   
  25. input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; }/*设计鼠标的动态效果*/   
  26. label {/*定义标签样式*/   
  27.     margin-left: 10px;   
  28.     color: #999999;   
  29.     display:block;/*以块状显示，实现分行显示*/   
  30. }   
  31. .submit input {/*设计提交按钮的样式*/   
  32.     width:auto;   
  33.     padding: 9px 15px;   
  34.     background: #617798;   
  35.     border: 0;   
  36.     font-size: 14px;   
  37.     color: #FFFFFF;   
  38. }   
  39. </style>  
  40. </head>  
  41.   
  42. <body>  
  43. <form>  
  44.     <p class="name">  
  45.         <label for="name">姓名</label>  
  46.         <input type="text" name="name" id="name" />  
  47.     </p>  
  48.     <p class="email">  
  49.         <label for="email">邮箱</label>       
  50.         <input type="text" name="email" id="email" />  
  51.     </p>  
  52.     <p class="web">  
  53.         <label for="web">个人网址</label>       
  54.         <input type="text" name="web" id="web" />  
  55.     </p>  
  56.     <p class="text">  
  57.         <label for="text">留言</label>  
  58.         <textarea name="text" id="text"></textarea>  
  59.     </p>  
  60.     <p class="submit">  
  61.         <input type="submit" value="提交" />  
  62.     </p>  
  63. </form>  
  64. </body>  
  65. </html>  

演示效果：

CSS3 RGBA色彩模式使用实例讲解

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

CSS3 RGBA色彩模式使用实例讲解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
CSS3不透明度实例讲解
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记（二）
Apr 26 #HTML / CSS
CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 #HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 #HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 #HTML / CSS
Panasonic(1) 德生9700DX(1) ICF-SW7600GR(1) D1835(1) L4X25T(1) 德生PL330(2) ICF-SW55(1) 飞利浦(2) 德劲1103(3) PHILIPS(3)
You might like
PHP邮件专题
2006/10/09 PHP
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP基于GD库的缩略图生成代码（支持jpg,gif,png格式）
2014/06/19 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python线程指南详细介绍
2017/01/05 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
英国领先的游戏零售商：GAME
2019/09/24 全球购物
大学毕业生自荐书怎么写？
2014/01/06 职场文书
初中班主任寄语
2014/04/04 职场文书
大二学生自我检讨书
2014/10/23 职场文书
受资助学生感谢信
2015/01/21 职场文书
南极大冒险观后感
2015/06/05 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android