背景：
极客观点
项目管理
HarmonyOS
<!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>如上图所示：虽然可以设置虚线边框，但是虚线边框的样式往往需要修改：比如:
可以继续配合 border-image-slice和border-image-repeat，看是否能达到你想要的效果。border-image-slice会切分图像几个区域,在MDN上试试这个DEMOhttps://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);
}当然我觉的这个思路应用到 border-image 上来实现也是可以的。
5 回答7.6k 阅读
3 回答6.5k 阅读✓ 已解决
4 回答11k 阅读
3 回答1.8k 阅读✓ 已解决
1 回答5.9k 阅读✓ 已解决
3 回答4k 阅读✓ 已解决
2 回答1.8k 阅读✓ 已解决
之前遇到过，可以用设置标签的背景来设置，具体看下面的代码
这串代码中，设置了每个背景的高度为1，宽度为10（左右的边框就是反过来）,10就是这个实线+间隔（及透明区域）的总宽度，linear-gradient中的百分比可以分别设置实线和间隔的宽度，代码中设置50%，就表示间隔和实线的宽度分别占10的50%即一般，后续可以通过调整百分比来调整实线和间隔的宽度
你参考一下呢