位置: IT常识 - 正文
css 实现虚线效果的3种方式详解(cssborder虚线边框)
编辑：rootadmincss 实现虚线效果的3种方式详解 一、效果
本文链接地址:https://www.jiuchutong.com/zhishi/297883.html
转载请保留说明！
推荐整理分享css 实现虚线效果的3种方式详解(cssborder虚线边框)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css里虚线,css样式虚线怎么实现,cssborder虚线边框,css中虚线怎么设置,cssborder虚线边框,cssborder虚线边框,css中虚线怎么设置,css中实线虚线,内容如对您有帮助，希望把文章链接给更多的朋友！
首先可以看一下下图显示的实现效果：
用三种方式实现了虚线效果： 点击查看demo代码二、实现1、border 属性查看 mdn 的 border，我们知道 border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color。
border-style 可以设置边框的样式，其中 使用 dashed 设置虚线效果。
实现代码：
设置div的样式
.box {height: 100px;line-height: 100px;margin-bottom: 20px;} <div className="box line1">虚线1</div>用 border 实现：
/*虚线1 css*/.line1 {border: 1px dashed red;} 2、巧用 background 和 linear-gradient我上篇文章《css 设置border边框颜色渐变效果》 里有详细的介绍过 linear-gradient 的使用，不清楚的同学可以先学习下
先看实现代码：
<div className="box line2">虚线2</div>/*虚线2 css*/.line2 {background: linear-gradient(to left,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);background-size: 10px 1px;background-repeat: repeat-x;}我们把css拆解开慢慢看：
1）先设置了backgroundbackground 属性是一个 简写属性，可以在一次
上一篇：基于Perclos＆改进YOLOv7的疲劳驾驶DMS检测系统（源码＆教程）
下一篇：关于将tomcat卸载干净(如何将tomcat卸载干净)