css3.0有关圆角和渐变

html-css014

css3.0有关圆角和渐变,第1张

IE6,IE7 圆角,颜色渐变都不支持。 IE8 不支持圆角,初步支持 渐变。 IE9 圆角,渐变 都支持,但效果不如 firefox 的好。IE渐变 css 为 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0',endColorstr='#D7D7D7',GradientType=0)

IE 9 一下想支持 圆角和渐变(ie8 稍微支持渐变)都只有用 图片了。希望能有所帮助。

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+等浏览器的支持。

CSS3 定义了两种类型的渐变(gradients):

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

径向渐变(Radial Gradients)- 由它们的中心定义

语法:background-image: linear-gradient(angle, color-stop1, color-stop2)