如何自定义设置虚线边框的样式?

背景:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚线边框示例</title>
  <style>
    .box {
      border: 1px dashed red
    }
  </style>
</head>

<body>
  <div class="box">
    这是一个带有虚线边框的 div 元素。
  </div>
</body>

</html>

image.png

如上图所示:虽然可以设置虚线边框,但是虚线边框的样式往往需要修改:比如:

  1. 单个实线间的间距自定义调整;
  2. 单个实线的长度自定义调整。
阅读 5k
5 个回答
✓ 已被采纳

之前遇到过,可以用设置标签的背景来设置,具体看下面的代码

.box{
        width: 200px;
        height: 100px;
        background: linear-gradient(to right, transparent 0,  transparent 50%, red 50%, red 100%) repeat-x top/10px 1px,
            linear-gradient(to right, transparent 0,  transparent 50%, red 50%, red 100%) repeat-x bottom/10px 1px,
            linear-gradient(transparent 0,  transparent 50%, red 50%, red 100%) repeat-y left/1px 10px,
            linear-gradient(transparent 0,  transparent 50%, red 50%, red 100%) repeat-y right/1px 10px;
}

这串代码中,设置了每个背景的高度为1,宽度为10(左右的边框就是反过来),10就是这个实线+间隔(及透明区域)的总宽度,linear-gradient中的百分比可以分别设置实线和间隔的宽度,代码中设置50%,就表示间隔和实线的宽度分别占10的50%即一般,后续可以通过调整百分比来调整实线和间隔的宽度

你参考一下呢

虚线边框的间距可以通过 border-image 属性来设置

border-image: url(path-to-your-image.png)

可以继续配合 border-image-sliceborder-image-repeat,看是否能达到你想要的效果。
border-image-slice会切分图像几个区域,在MDN上试试这个DEMO
https://developer.mozilla.org/zh-CN/play

我写了一个例子看一下是不是你要的,可以测试一下,我自己也测试过,那个位置还有那个大小可以自己根据需要调整

思路

在上面画一条线段,然后给它拆分,调整位置,再把原来的虚线那一块用背景白色覆盖

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚线边框示例</title>
  <style>
    .box {
      border: 1px dashed red;
      padding: 20px;
      margin: 20px;
      position: relative;
    }

    .top-blue-dash {
      position: absolute;
      top: -1px;
      left: 50px;
      width: 10px;
      height: 1px;
      background: linear-gradient(to right, blue 50%, transparent 50%);
      background-size: 4px 1px;
      background-repeat: repeat-x;
    }

    .right-blue-dash {
      position: absolute;
      top: 20px;
      right: -1px;
      width: 1px;
      height: 10px;
      background: linear-gradient(to bottom, blue 50%, transparent 50%);
      background-size: 1px 4px;
      background-repeat: repeat-y;
    }

    .bottom-blue-dash {
      position: absolute;
      bottom: -1px;
      left: 50px;
      width: 10px;
      height: 1px;
      background: linear-gradient(to right, blue 50%, transparent 50%);
      background-size: 4px 1px;
      background-repeat: repeat-x;
    }

    .left-blue-dash {
      position: absolute;
      top: 20px;
      left: -1px;
      width: 1px;
      height: 10px;
      background: linear-gradient(to bottom, blue 50%, transparent 50%);
      background-size: 1px 4px;
      background-repeat: repeat-y;
    }

    .cover-red {
      position: absolute;
      background: white;
    }

    .cover-red.top {
      top: -1px;
      left: 50px;
      width: 10px;
      height: 1px;
    }

    .cover-red.right {
      top: 20px;
      right: -1px;
      width: 1px;
      height: 10px;
    }

    .cover-red.bottom {
      bottom: -1px;
      left: 50px;
      width: 10px;
      height: 1px;
    }

    .cover-red.left {
      top: 20px;
      left: -1px;
      width: 1px;
      height: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    这是一个带有虚线边框的 div 元素。
    <div class="cover-red top"></div>
    <div class="top-blue-dash"></div>
    <div class="cover-red right"></div>
    <div class="right-blue-dash"></div>
    <div class="cover-red bottom"></div>
    <div class="bottom-blue-dash"></div>
    <div class="cover-red left"></div>
    <div class="left-blue-dash"></div>
  </div>
</body>

</html>

之前有一个类似的问答,可能会对你有帮助。想让边框颜色从内向外渐变? - SegmentFault 思否

我大概修改了一下(scss):

@mixin genBgDashBorder($borderColor: black, $borderWidth: 10px, $borderGap: 5px) {
  $totalSize: $borderWidth + $borderGap;
  background: content-box linear-gradient(white, white), 
              border-box conic-gradient(from -90deg at #{$borderWidth} #{$borderWidth}, $borderColor 90deg, transparent 0deg) 0 0 / #{$totalSize} #{$totalSize};
  padding: $borderGap;
}

.my-border {
  height: 100px;
  @include genBgDashBorder(red, 20px, 4px);
}

图片.png

当然我觉的这个思路应用到 border-image 上来实现也是可以的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏