<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.dotted {
position: relative;
background: -o-linear-gradient(left, #5d95e0, #697dde);
background: -o-linear-gradient(right, #5d95e0, #697dde);
background: -moz-linear-gradient(right, #5d95e0, #697dde);
background: linear-gradient(to right, #5d95e0, #697dde);
width: 300px;
height: 200px;
}
.dotted:before {
content: ' ';
width: 0;
height: 100%;
position: absolute;
/* 小球形状 */
border-right: 6px dotted white;
left: -3px;
top: 0px;
}
</style>
&l
用CSS来实现优惠券上的锯齿效果
最新推荐文章于 2024-06-12 14:22:32 发布
本文介绍如何利用CSS技巧创建出类似优惠券上的锯齿效果,通过实例展示和代码实现,让读者理解这一视觉效果的创建过程。
摘要由CSDN通过智能技术生成