CSS实现虚线的⽅法
⽅法⼀：利⽤边框的dotted或者dashed样式实现虚线
使⽤dotted或dashed边框实现的虚线是有区别的：
dotted边框：是⽤⼀个个点(dot)组成的虚线；
dashed边框：是⽤⼀个个破折号(dash)组成的虚线；
<style>
.box {
margin: 20px;
padding: 10px 30px;
width: 200px;
}
.
card1 {
border: 1px dotted #000;
borderbox
}
.card2 {
border: 1px dashed #000;
}
</style>
<body>
<div class="box card1">
⽤dotted边框实现的虚线
</div>
<div class="box card2">
⽤dashed边框实现的虚线
</div>
</body>
这种⽤边框实现的虚线，在边框宽度⽐较⼩(1px)的情况下，因为组成虚线的点排列的⽐较密集(这是没有办法修改的)，导致虚线的效果看起来不明显。可以通过修改边框的宽度，来突出虚线的显⽰效果，但有时候会与设计图的要求不⼀致；
⽅法⼆：使⽤CSS实现效果显著的虚线
在上述代码的基础上添加如下代码：
<style>
.card3 {
background-image: linear-gradient(to right, #000 35%, rgba(255,255,255,0) 0%); /* 35%设置虚线点x轴上的长度 */        background-position: bottom; /* top配置上边框位置的虚线 */
background-size: 10px 1px; /* 第⼀个参数设置虚线点的间距；第⼆个参数设置虚线点y轴上的长度 */
background-repeat: repeat-x;
}
.card4 {
background-image: linear-gradient(#000 35%, rgba(255,255,255,0) 0%); /* 35%设置虚线点y轴上的长度 */
background-position: left; /* right配置右边框位置的虚线 */
background-size: 1px 10px; /* 第⼀个参数设置虚线点x轴上的长度；第⼆个参数设置虚线点的间距 */
background-repeat: repeat-y;
}
.card5 {
border: 1px dashed transparent;
background: linear-gradient(#fff,#fff) padding-box,
repeating-linear-gradient(-45deg,#000 0, #000 0.3em, #fff 0,#fff 0.6em);
/* 0.3em设置虚线点的宽度或长度；0.6em设置虚线点的间距 */
}
</style>
<body>
<div class="box card3">
css实现横的虚线
</div>
<div class="box card4">
css实现竖的虚线
</div>
<div class="box card5">
css模拟边框的虚线
</div>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。