css3颜色值 线性渐变和径向渐变
CSS3 颜色之 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 颜色之渐变色彩
CSS3 Gradient 分为线性渐变(linear)-向下/向上/向左/向右/对角方向和径向渐变(radial)-由它们的中心定义。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
后边跟-webkit-、-moz-或-o-的数字指定了需加上前缀才能支持属性的第一个版本。
我们来说一下线性渐变:
参数:
第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:
第一个参数省略时,默认为“180deg”,等同于“to bottom”。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
语法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
线性渐变 – 从上到下(默认情况下)
#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ }
上面的实例演示了从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:
线性渐变 – 从左到右
#grad { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 */ }
上面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:
线性渐变 – 对角
通过指定水平和垂直的起始位置来制作一个对角渐变。
#grad { background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */ }
上面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:
使用角度
如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(tobottom、totop、toright、toleft、tobottomright,等等)。
语法
background: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。
但是,请注意很多浏览器(Chrome,Safari,fiefox 等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90-x=y 其中 x 为标准角度,y 为非标准角度。
下面的实例演示了如何在线性渐变上使用角度:
#grad { background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(180deg, red, blue); /* 标准的语法 */ }
效果:
使用多个颜色结点
#grad { background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, green, blue); /* 标准的语法 */ }
3 个颜色结点(均匀分布)
#grad1 { height: 200px; background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, green, blue); /* 标准的语法(必须放在最后) */ }
效果:
7 个颜色结点(均匀分布)
#grad2 { height: 200px; background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */ }
效果:
3 个颜色结点(不均匀分布)
#grad3 { height: 200px; background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */ background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法(必须放在最后) */ }
效果:
注意: 当未指定百分比时,颜色结点不会自动均匀分布。Internet Explorer 9 及之前的版本不支持渐变。
如何创建一个带有彩虹颜色和文本的线性渐变
#grad1 { height: 55px; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */ }
效果:
使用透明度(transparent)
CSS3 渐变也支持透明度(transparent),可用于创建减弱变淡的效果。
为了添加透明度,我们使用 rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
例子:
#grad1 { height: 200px; background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */ }
效果:
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变
#grad1 { height: 200px; background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法(必须放在最后) */ }
效果:
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
径向渐变的实例:
语法
background: radial-gradient(center, shape size, start-color, ..., last-color);
径向渐变 – 颜色结点均匀分布(默认情况下)
颜色结点均匀分布的径向渐变:
#grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 标准的语法(必须放在最后) */ }
效果:
径向渐变 – 颜色结点不均匀分布
颜色结点不均匀分布的径向渐变:
#grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法(必须放在最后) */ }
效果:
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
形状为圆形的径向渐变
椭圆形 Ellipse(默认):
#grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */ background: radial-gradient(red, yellow, green); /* 标准的语法(必须放在最后) */ }
效果:
圆形 Circle:
#grad2 { height: 150px; width: 200px; background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ background: radial-gradient(circle, red, yellow, green); /* 标准的语法(必须放在最后) */ }
效果:
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值:
1、closest-side
2、farthest-side
3、closest-corner
4、farthest-corner
带有不同尺寸大小关键字的径向渐变:
(1)closest-side 实例
#grad1 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */ }
效果:
(2)farthest-side 实例
#grad2 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */ }
效果:
(3)closest-corner 实例
#grad3 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */ }
效果:
(4)farthest-corner 实例
#grad4 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */ }
效果:
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
#grad1 { height: 150px; width: 200px; background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法(必须放在最后) */ }
效果:
码云笔记 » css3颜色值 线性渐变和径向渐变