首页 > 开发 > CSS > 正文

CSS实现反方向圆角的示例代码

2024-07-11 08:42:01
字体:
来源:转载
供稿:网友

原理

父级元素 relative,子元素 absolute,然后通过topleftrightbottom来设置具体出现位置。

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

效果图

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表