lineargradient,lineargradient 颜色
css3 linear-gradient线性渐变如何使用才有效果?求源码
linear-gradient这个CSS3的线性渐变属性,目前浏览器还没同一,需要加前缀,例如:
!doctype?html
html?lang="en"
head
meta?charset="UTF-8"
titleDocument/title
/head
style
#div1{
????width:?200px;
????height:?100px;
????background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
????background:-webkit-gradient(linear,0?50%,100%?50%,from(#ace),to(#f96));/*Old?gradient?for?webkit*/
????background:-webkit-linear-gradient(left,#ace,#f96);/*new?gradient?for?Webkit*/
????background:-o-linear-gradient(left,#ace,#f96);?/*Opera11*/
}
/style
body
div?id="div1"/div
/body
/html
你测试一下,基本上除了比较老的IE以外,都能显示了。
CSS如何使用渐变背景(linear-gradient)实现下划线?
background: linear-gradient(to right,#60B1F3 0,#60B1F3 16%, #DCDCDC 0,#DCDCDC 100%)
我现在才学到这里,不过我查了下资料自己会弄了。第二个色块从0到开始到自己的终止百分比就不会产生渐变了。
例:background: linear-gradient(to right,色块1 0,色块1 16%, 色块2 0,色块2 100%)
CSS3里面的线性渐变:linear-gradient参数是什么样子的?
1、语法
2、参数
第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:
第一个参数省略时,默认为“180deg”,等同于“to?bottom”。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
例如:
background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);
该属性已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
css color之线性linear-gradient()函数
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型,是一种特别的image数据类型。
linear-gradient( [ angle | to side-or-corner ,]? color-stop-list )
? \---------------------------------/ \----------------------------/
? ? Definition of the gradient line? ? ? ? List of color stops?
where side-or-corner = [ left | right ] || [ top | bottom ]
? and color-stop-list = [ linear-color-stop [, color-hint? ]? ]#, linear-color-stop
? and linear-color-stop = color [ color-stop-length ]?
? and color-stop-length = [ percentage | length ]{1,2}
? and color-hint = [ percentage
栗子:
div {
? background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}