【CSS3】---颜色RGBA及渐变色
2015-11-05 00:00
686 查看
颜色之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);
渐变色彩
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。这一小节我们来说一下线性渐变:
参数:
第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:
(单击图片可放大)
第一个参数省略时,默认为“180deg”,等同于“to bottom”。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
效果图:
例子
<!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,red,green,blue,yellow,black,white); } </style> </head> <body> <p>右下角向左上角的线性渐变背景</p> </body> </html>
效果:
相关文章推荐
- 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素
- 【CSS3】---元素隐藏(是否占据空间、是否可点击)
- 【CSS3】---结构性伪类选择器-root+not+empty+target
- 【CSS3】---盒模型margin、padding及border
- 【CSS3】---:before :after生成内容
- 【CSS3】---曲线阴影翘边阴影
- 【CSS3】---认识CSS3
- 【CSS3】---阴影 box-shadow
- 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
- 【CSS3】---CSS after实现分隔线
- 【CSS3】---文本阴影text-shadow
- 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范
- 【CSS3】---属性选择器
- 【CSS3】---画几何图
- 【CSS3】---last-of-type选择器+nth-last-of-type(n)选择器
- 【CSS3】---text-overflow 与 word-wrap
- 【CSS3】---嵌入字体@font-face
- 【CSS3】---only-child选择器+only-of-type选择器
- 【CSS3】---为边框应用图片 border-image
- 【CSS3】---练习制作导航菜单