在css3中定义了两种类型的渐变:什么和什么,分别使用什么和什么函数实现？

html-css07

在css3中定义了两种类型的渐变:什么和什么,分别使用什么和什么函数实现？,第1张

在CSS3中，定义了两种类型

（1）线性渐变：向下/向上/向左/向右/对角方向，使用linear-gradient()

（2）径向渐变：由它们的中心定义，使用radial-gradient()

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.demo{

width:200px

height:10px

background:-webkit-linear-gradient(left, rgb(80,80,255,0.2) , #fff) /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(left, rgb(80,80,255,0.2) , #fff)/* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(left, rgb(80,80,255,0.2) , #fff)/* Firefox 3.6 - 15 */

background: linear-gradient(to left, rgb(80,80,255,0.2) , #fff)/* 标准的语法 */

}

</style>

</head>

<body>

<div class="demo" ></div>

</body>

</html>

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

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

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