YPE html>
<html>
<head>
<meta charset="UTF-8">
<title>渐变</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 10px;
}
.div1{
/*渐变，当我们给背景颜色的时候，可以给不止一种颜色，
系统会在两种颜色中间生成一个渐变区域*/
/*1、直接给颜色给2个颜色，逗号分隔开*/
background:linear-gradient(blue,green);
}
.div2{
/*2中写法*/
background:linear-gradient(to left,blue,green);
/*background:-webkit-linear-gradient(left,blue,green);/*/
}
.div3{
background: -webkit-linear-gradient(left,blue 20%,green 20%);
}
.div4{
/*linear-gradient 线性渐变分隔的时候以直线来分隔。
线性渐变可以给多个参数，第一个参数可以是方向，可以给上下左右，4个角，度数。
代表渐变开始的位置，剩下的参数可以给颜色，颜色可以有多个。颜色后面可以空格跟数值
，代表这个颜色的渐变从什么地方开始*/
background: -webkit-repeating-linear-gradient(30deg,blue 10px,green 60px);
}
.div5{
background: -webkit-radial-gradient(15px 30px,white 5px,black 5px);
}
.div6{
/*径向渐变。
用法和线性渐变一样，当径向渐变是椭圆的时候，可以设置circle属性让它变成圆形*/
width: 400px;
background: -webkit-repeating-radial-gradient(circle,white 50px,black 100px);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</body>
</html>
网友评论