CSS3学习笔记之颜色
2014-09-02 13:40
183 查看
1颜色之RGBA
RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。
语法:
color:rgba(R,G,B,A)
以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。
代码示例:
background-color:rgba(100,120,60,0.5);
2.渐变色彩
CSS3 Gradient分为线性渐变(linear)和径向渐变(radial)W3C语法已经得到了IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器的支持
参数:
第一个参数指定渐变方向,默认为“180deg”,等同于“to bottom”,也可以为表示“角”的关键词。0度表示渐变方向从下向上,90度表示从左向右,180度表示从上向下,270度表示从右向左。与之一一对应的关键词为to top、to right、to bottom和to left。除此之外,还可以使用“top left”左上角到右下角、“top right”右上角到左下角等。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
<span style="color:#1f2426;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Gradient</title> <style type="text/css"> p { width: 400px; height: 150px; line-height: 150px; text-align:center; color: #000; font-size:24px; background-image:linear-gradient(to top left,#fff,#999); } </style> </head> <body> <p>右下角向左上角的线性渐变背景</p> </body> </html></span>
相关文章推荐
- CSS3学习笔记 之 边框颜色
- 学习笔记 css3--选择器&新增颜色模式&文本相关
- C++/GDI+ 学习笔记(四)——实用技巧——颜色矩阵(ColorMatrix)
- linux shell 编写屏幕产生颜色的脚本学习笔记
- Flex学习笔记(九) 颜色渐变
- 精通Visual C++图像编程之位图颜色处理(学习笔记)
- Direct3D 9学习笔记(5)颜色
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
- 孙鑫VC学习笔记:第十讲画图 创建颜色/字体对话框
- MFC学习笔记之八————颜色对话框与字体对话框
- MFC学习笔记之八————颜色对话框与字体对话框
- CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应
- Sandy引擎学习笔记:颜色材质
- j2me学习笔记【13】——创建矩形框、圆角矩形以及填充颜色小例子
- OpenGL学习笔记(9)颜色混合
- openGL学习笔记2(颜色)
- 【转】C++/GDI+ 学习笔记(四)——实用技巧——颜色矩阵(ColorMatrix)
- PBRT学习笔记: 颜色在离线渲染中的表示方法
- ASP.NET学习笔记六之表单&图像&背景&颜色&颜色值&颜色名
- Sandy引擎学习笔记:颜色材质