CSS3设置border某一边的颜色渐变

html-css024

CSS3设置border某一边的颜色渐变,第1张

如图所示,渐变的边框是一个 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+等浏览器的支持。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div {width: 200pxheight: 150pxbackground: linear-gradient(red, white)}

3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。