原码笔记

原码笔记

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

小诸哥 0

原理

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

DOM结构

  1. <div class="wrapper-dashed">
  2.      <div class="dashed"></div>
  3. </div>

css样式

  1. .wrapper-dashed{
  2.      position: relative;
  3.      height: 1px;
  4.      width: 100%;
  5. }
  6. /*虚线实现*/
  7. .dashed {
  8.      border-top: 1px dashed #cccccc;
  9.      height: 1px;
  10.      overflow: hidden;
  11. }
  12. .dashed:before, .dashed:after{
  13.      display: block;
  14.      position: absolute;
  15.      content: "";
  16.      width:10px;
  17.      height:10px;
  18.      background-color:#f3f5f9;
  19.      border-radius:50%;
  20.      top: -5px;
  21. }
  22. .dashed:before{
  23.      left: -5px;
  24. }
  25. .dashed:after{
  26.      right: -5px;
  27. }

效果图

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

标签: CSS 实现 代码