CSS实现虚线的方法

方法一：利用边框的dotted或者dashed样式实现虚线

使用dotted或dashed边框实现的虚线是有区别的：

dotted边框：是用一个个点(dot)组成的虚线；

dashed边框：是用一个个破折号(dash)组成的虚线；

<style>.box {margin: 20px;padding: 10px 30px;width: 200px;}.card1 {border: 1px dotted #000;}.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>

CSS实现虚线的方法相关推荐

用CSS添加鼠标样式-箭头、小手、十字 CSS实现虚线之dotted边框-点虚线、dashed边框-破折号虚线
用CSS添加鼠标样式-箭头.小手.十字- & CSS实现虚线之dotted边框-点虚线.dashed边框-破折号虚线 //小手样式 cursor:pointer; cursor其他取值 aut ...
css修饰边框为虚线,css如何设置虚线边框css虚线样式？css设置虚线边框的方法示例...
首页 >web前端>css教程>正文 css如何设置虚线边框?css设置虚线边框的方法示例原创2018-10- 在网页布局中,有时候为了整体网页的美观可能需要设置虚线边框,那么虚线 ...
在html中双虚线怎么写,CSS虚线实现方法及多种应用实例
很多 CSS 初学者在前端开发过程中,经常会用到 CSS 虚线样式,但是不知道 CSS 虚线样式该如何实现,比如一个 CSS 这样写:border-style:dotted solid double ...
css 怎样设置虚线,css生成可控虚线的方法
前言 css生成虚线,前端小儿科.一般都会用border来实现,不做深入考究,但是生成如下虚线?如何操作? 实现方式实现方式,有的人用多个span生成,一个小圆点就是一个span,这样是可以,但是整 ...
php hr样式虚线,CSS的虚线样式怎么实现
说到CSS的虚线样式,那么我们会联想到border的solid,在网页的布局里solid用的概率应该是最高的了,但是大家知道还有dotted虚线和ashed虚线吗?今天来给大家介绍这俩种属性做出虚线的 ...
css渐变虚线边框的实现
css渐变虚线边框的实现问题虽然这种实现兼容性不错,IE10+都支持,但是,虚实比例由于反过来了,因此,虚线太稀疏,而且边角无法形成直角.在实际项目中,是过不了设计师这一关的. 那有没有效果更精致 ...
css border 虚线间距_【前端冷知识】CSS如何实现虚线框动画
我们知道,CSS支持将元素的border属性设为虚线,例如: <h1>君喻学堂h1> h1 { border: dashed 1px; } 但是,CSS的虚线样式是固定的,如果我 ...
CSS控制表格的方法
现在的网页都是DIV+CSS来布局的,table布局时代早已经结束了,那table还能干什么呢? 当然是现实数据了,这才是他的本事! 表格框架要和CSS分离,还table纯结构,需要琢磨一下,下面是一 ...
清除浮动的方法总结CSS实现水平垂直居中方法总结
1.清除浮动的方法总结当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至 ...

CSS实现虚线的方法

方法一：利用边框的dotted或者dashed样式实现虚线

方法二：使用CSS实现效果显著的虚线

CSS实现虚线的方法相关推荐

最新文章

热门文章