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>
渐变
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 你是否注意到，“渐变设计”已经成为了一种美的体验。无论是APP的icon，还是PPT的背景，渐变色都比纯色要...
- 前言 最近一直想写个app，可是不知道想些啥，今天给大家分享一下 渐变动起来的效果 效果 因为gif图比较大，所有...
- 径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定...
- 由于项目需求要做一个这样的功能，所以做好之后，抽取出来，封装了下，希望能帮到有需要的朋友。 一.效果图 二.思路 ...
- 原来还有个径向渐变，之前都是用的普通的轴向渐变[IOS图像处理（5）填充模式 - 幸福小弥 - 博客园](http...
