自定义 border（dashed）虚线的间距

最新推荐文章于 2025-02-04 23:36:00 发布

吸猫患者

最新推荐文章于 2025-02-04 23:36:00 发布

阅读量1.3w

点赞数 9

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44781484/article/details/102385571

版权

css 专栏收录该内容

1 篇文章

订阅专栏

前些日子接到一个小需求（见下图）

一个很常见的获取验证码的功能

我看了一眼，想了几秒钟，这玩意不就是 border-bottom：dashed 嘛，然后我就咔咔咔上代码，就变成下面这样了。

我吐了，我顿时感觉我好菜

敲完后我就感觉自己有很蠢，肯定不是这样实现的。然后我就想了一下，因为右边的按钮是需要用到渐变的，恰巧左边的下划线也能用渐变实现。东西想通之后那就也是咔咔咔几下的事情了。

      .one {
        width: 300px;
        margin-top: 200px;
        margin-left: 470px;
        height: 10px;
        background: linear-gradient(
          to right,
          transparent 0%,
          transparent 50%,
          #ccc 50%,
          #ccc 100%
        );
        background-size: 50px 1px;
        background-repeat: repeat-x;
      }
      button {
        color: #fff;
        width: 100px;
        height: 40px;
        border-radius: 20px;
        border: none;
        outline: none;
        position: absolute;
        top: 160px;
        left: 810px;
        background: linear-gradient(to right, #955afe, #2299ff);
      }
  <body>
    <div class="one"></div>
    <button>获取验证码</button>
  </body>