CSS3 定义了两种类型的渐变(gradients):
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
径向渐变(Radial Gradients)- 由它们的中心定义
语法:background-image: linear-gradient(angle, color-stop1, color-stop2)
如图所示,渐变的边框是一个 li 标签,要给他的 border-bottom 设置颜色渐变。
background-image 中的第一个 linear-gradient 是设置 li 标签的背景色的,
第二个 linear-gradient 配合 border-image 即可设置 border 的渐变色。
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+等浏览器的支持。