CSS实现反方向圆角的示例代码
发布时间：2018-10-12 15:24:27 作者：jvjs 
我要评论
我要评论这篇文章主要介绍了CSS实现反方向圆角的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
原理
父级元素 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;
}
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要教大家CSS3制作圆角图片和椭圆形图片的具体实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-08
- 本篇文章给大家介绍基于css3来实现边框圆角效果，实现此效果当然border-radius要在firefox或Safari 和 Chrome才能实现哦。对css3圆角边框制作代码感兴趣的朋友参考下吧2015-11-18
- 这篇文章主要介绍了CSS的一些圆角图形实例分享,包括带有3D效果的CSS圆角实现,需要的朋友可以参考下2015-09-28
- 这篇文章主要介绍了CSS3绘制圆角矩形的简单示例,注意一下各浏览器对CSS3的兼容性,需要的朋友可以参考下2015-09-28
- 这篇文章主要介绍了使用css实现圆角图形绘制,文中也提到了相关的锯齿问题,需要的朋友可以参考下2015-07-22
- 这篇文章主要为大家介绍了纯CSS实现圆角折叠菜单的方法,通过多个宽度渐进变化的页面元素堆加模拟圆角效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-05-19
最新评论