原理
父级元素 relative
,子元素 absolute
,然后通过top
、left
、right
、bottom
来设置具体出现位置。
DOM结构
- <div class="wrapper-dashed">
- <div class="dashed"></div>
- </div>

CSS样式
- .wrapper-dashed{
- position: relative;
- height: 1px;
- width: 100%;
- }
- /*虚线实现*/
- .dashed {
- border-top: 1px dashed #cccccc;
- height: 1px;
- overflow: hidden;
- }
- .dashed:before, .dashed:after{
- display: block;
- position: absolute;
- content: "";
- width:10px;
- height:10px;
- background-color:#f3f5f9;
- border-radius:50%;
- top: -5px;
- }
- .dashed:before{
- left: -5px;
- }
- .dashed:after{
- right: -5px;
- }
效果图


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。