有没有办法自定义 border 为 dashed 时的虚线间距?

CSS 的 border: 1px dashed 样式太难看了,虚线非常的宽,dotted 也是一样,间距太窄。

有没有办法控制虚线或者点的长度或者间距呢?

阅读 55.7k
评论
    6 个回答

    可以的,用渐变

    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
      • 16.3k

      没有办法。

      但SVG线条是可以设置间距的。

      path {
          stroke-dasharray: 4;
          stroke-dashoffset: 22;
      }
      
        • 24.9k

        Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

        ——MDN

        囧,看来没好办法。不过你可以用图片作边框用。

          • 5.2k

          如果一定要这样,使用一下背景图片也是个选择,切一小片repeat就好了,而且兼容性很好。但如果是竖边框的话,就稍微麻烦些。

            • 1
            • 新人请关照
                // 让 after 的 border 覆盖元素 border 的 n 个 px 的宽度,使其 border 宽度减小 npx
                ::after {
                  border: 1px solid #fff; // 主要是这句
                  background: transparent;
                  
                  display: block;
                  content: " ";
                  height: 100%;
                  width: 100%;
                  
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translateX(-50%) translateY(-50%);
                }

              @哔哔肾 “鸭式辨型” 这个有意思,思路开阔。

              来个伪类写的分割线

                    &:after
                      width 10px
                      height calc(100% - .1rem)
                      background-image linear-gradient(to bottom, #ccc 0%, #ccc 50%, transparent 50%)
                      background-size 1px 8px
                      background-repeat repeat-y
                      position absolute
                      top 0.25em
                      left -0.42rem
                      content ''

              父级给两个属性

                    position relative
                    margin .42rem

              这个实现出来的,在iOS与android上基本是一致的效果,质量较高的还原了设计师的设计。

                撰写回答

                登录后参与交流、获取后续更新提醒

                相似问题
                推荐文章