问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
dayDayUp
    1521049

    背景：

    <!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. 单个实线的长度自定义调整。
    htmlcss
    阅读 1.3k
    5 个回答
    得票最新
    头像
    sunw
      462
      ✓ 已被采纳

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

      .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%即一般，后续可以通过调整百分比来调整实线和间隔的宽度

      你参考一下呢

      头像头饰
      等一个机会
        43515

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

        border-image: url(path-to-your-image.png)
        头像头饰
        Frank
          27918

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

          头像
          Seven
            587116

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

            思路

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

            <!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>
            头像头饰
            陟上晴明
              21.1k124691

              之前有一个类似的问答，可能会对你有帮助。想让边框颜色从内向外渐变？ - 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 上来实现也是可以的。

              查看全部 5 个回答
              推荐问题
              宣传栏