css 如何实现 颜色的渐变??

html-css010

css 如何实现 颜色的渐变??,第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的背景颜色从红色到白色渐变。

<div style="width:300pxheight: 75pxbackground:url(img/backindex_22.png) no-repeatopacity: 1background-size:100%"></div>

<div style="width:300pxheight: 75pxbackground:url(img/backindex_22.png) no-repeat 0 -75pxopacity: 0.8background-size:100%"></div>

<div style="width:300pxheight: 75pxbackground:url(img/backindex_22.png) no-repeat 0 -150pxopacity: 0.6background-size:100%"></div>

<div style="width:300pxheight: 75pxbackground:url(img/backindex_22.png) no-repeat 0 -225pxopacity: 0.2background-size:100%"></div>

思路是这样,但看着不对劲,可能是背景颜色的问题,

css渐变只能操纵背景颜色,应该操作不了背景图片

如图所示,渐变的边框是一个 li 标签,要给他的 border-bottom 设置颜色渐变。

background-image 中的第一个 linear-gradient 是设置 li 标签的背景色的,

第二个 linear-gradient 配合 border-image 即可设置 border 的渐变色。