CSS实现反方向圆角

LuDongWei 发布于2019-08-29 16:57 / 1660人阅读

摘要：原理父级元素，子元素，然后通过来设置具体出现位置。结构样式虚线实现效果图

原理

父级元素 relative，子元素 absolute，然后通过top、left、right、bottom来设置具体出现位置。

DOM结构

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;
}

效果图

云服务器 GPU云服务器内凹圆角，css3 html表格实现反选 JS轻松实现CSS设置设置圆角

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114007.html

文档流&文字&CSS常用命令

摘要：文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用属性想打断的内联元文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排 sho...

zebrayoung 2019-08-30 14:13 评论0 收藏0
文档流&文字&CSS常用命令

摘要：文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用属性想打断的内联元文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排 sho...

pingink 2019-08-01 18:43 评论0 收藏0
用纯css来实现一个优惠券

摘要：关于径向渐变的具体使用可以参考张鑫旭的文章径向渐变语法及辅助理解案例则那么怎样实现我们要的效果呢我们先看看径向渐变的语法径向渐变由它的中心定义。查看原文可以有更好的排版效果哦前言我们在平时的网页中，经常会见到这样的优惠券或者其他的券（特征就是会有反方向的圆角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

awkj 2019-08-30 15:54 评论0 收藏0
CSS魔法堂：重拾Border之——不仅仅是圆角

摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...

_Dreams 2019-08-30 13:01 评论0 收藏0
CSS 无图片技术总结

摘要：预览动态移动边框锯齿边框首先我们重复度的透明背景，可以得到下面的再加一个反角度的秀景背景完整的锯齿边框效果更多背景效果动态移动边框查看三角形从上面的图可以看出的各边框是三角形，如果只设置下边框就可以得到三角形了。预览 showImg(https://segmentfault.com/img/remote/1460000006766693);动态移动边框showImg(https://...

pekonchan 2019-08-30 13:05 评论0 收藏0