lineargradient,lineargradient 颜色

http://www.itjxue.com  2023-01-23 09:35  来源:未知  点击次数: 

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);

}

(责任编辑:IT教学网)

更多

推荐导航代码文章