径向渐变指的是从一个中心点向四周扩散的渐变效果.径向渐变的方向由中心点往外部的,默认终止于元素的边框内边缘.径向渐变是可以设置径向渐变的半径的,径向半径分为水平半径和垂直半径.当两个半径一致的时候,只需要设置一个就行了,但是需要注意的是,这种省略方式不能使用百分比.径向渐变的中心点默认在图形的中心,可以使用at 的方式重新设置径向渐变的中心点
radial-gradient(100px at left top)
实例:使用径向渐变实现优惠券波形效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wave {
width: 200px;
height: 200px;
background: linear-gradient(to top,transparent 10px,red 10px) no-repeat,
radial-gradient(20px 15px at left 50% bottom 10px,red 10px,transparent 11px),
radial-gradient(20px 15px at left 10% bottom 10px,red 10px,transparent 11px)
;
background-size: auto 20px 10px;
}
</style>
</head>
<body>
<div class="wave"></div>
</body>
</html>
image.png
网友评论