是否可以使用 CSS 来定义具有两种交替的虚线颜色的线条（或形状边缘）？也就是说，如果1和2是不同颜色的像素，那么
1212121212121212 或 112211221122
我基本上想要一些方法来使用具有两种颜色的stroke-dasharray。线条本身是完全着色的。
如果这是不可能的，有什么好的方法来近似它？例如，我可以创建一个交替使用两种颜色的重复线性渐变，但这很难从 javascript 中设置这两种颜色。
【问题讨论】：
这在只有一个元素的 SVG 中是不可能的，但您可以使用两个不同的矩形，然后应用 stroke-dashoffset: x...
rect.stroke-red {
stroke: red;
fill: none;
stroke-width: 5;
}
rect.stroke-green {
stroke: green;
fill: none;
stroke-dasharray: 5,5;
stroke-width: 5;
}<svg xmlns="http://www.w3.org/2000/svg">
<rect class="stroke-red" x="10" y="10" width="101" height="101" />
<rect class="stroke-green" x="10" y="10" width="101" height="101" />
</svg>【讨论】：
stroke-dashoffset 似乎会导致看起来很有趣的矩形。
基于@duopixel 的答案，您可以使用stroke-dasharray 属性构建具有多种颜色的相当复杂的图案：
.L4 {
stroke: #000;
stroke-dasharray: 20,10,5,5,5,10;
}
.L5 {
stroke: #AAA;
stroke-dasharray: 0,20,10,15,10,0
}
.L6 {
stroke: #DDD;
stroke-dasharray: 0,35,5,15
}
参见http://jsfiddle.net/colin_young/Y38u9/ 演示带有复合虚线图案的线条和圆圈。
用 SO sn-p 更新：
svg {
width: 100%;
height: 160px;
}
path, circle {
stroke-width: 4;
}
text {
alignment-baseline: central;
font-family: sans-serif;
font-size: 10px;
stroke-width: 0;
fill: #000;
text-anchor: middle;
}
.dim {
stroke: #AAA;
stroke-width: 1;
stroke-dasharray: 1, 1;
}
circle.dim {
fill: #FFF;
}
.L4 {
stroke: #000;
stroke-dasharray: 20, 10, 5, 5, 5, 10;
}
.L5 {
stroke: #AAA;
stroke-dasharray: 0, 20, 10, 15, 10, 0
}
.L6 {
stroke: #DDD;
stroke-dasharray: 0, 35, 5, 15
}<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black">
<path class="dim" d="M5 20 l0 80" />
<path class="dim" d="M25 20 l0 80 l-10 20" />
<path class="dim" d="M35 20 l0 80 l-10 30" />
<path class="dim" d="M40 20 l0 120" />
<path class="dim" d="M45 20 l0 80 l10 30" />
<path class="dim" d="M50 20 l0 80 l10 20" />
<path class="dim" d="M60 20 l0 80 l15 10" />
<text x="5" y="110">0</text>
<text x="5" y="125">20</text>
<text x="25" y="135">30</text>
<text x="40" y="150">35</text>
<text x="55" y="140">40</text>
<text x="65" y="125">45</text>
<text x="82" y="115">55</text>
<path class="L4" d="M5 20 l215 0" />
<path class="L5" d="M5 20 l215 0" />
<path class="L6" d="M5 20 l215 0" />
<!-- separated to show composition -->
<text x="5" y="70" style="text-anchor:start">Separated to show composition:</text>
<path class="L4" d="M5 80 l215 0" />
<path class="L5" d="M5 90 l215 0" />
<path class="L6" d="M5 100 l215 0" />
<circle class="L4" cx="400" cy="80" r="60" />
<circle class="L5" cx="400" cy="80" r="60" />
<circle class="L6" cx="400" cy="80" r="60" />
</g>
</svg>【讨论】：
一种方式：
标题>
分区 {
宽度：100px；
高度：100px；
}
.dashbox {
边框：4px 蓝色虚线；
背景：橙色；
}
.dashbox > div {
背景：白色；
}
正文>
这是一个纯 CSS 的解决方案。
<div style="
margin:1rem;
width:4rem;
height:4rem;
border:5px solid red;
outline:5px dashed green;
outline-offset: -5px;"
></div>【讨论】：
一种可能对您有用的方法是在笔划上使用重复的线性渐变。这是一种适用于lines 的解决方法，因为您可以旋转渐变以匹配线条。
对于其他形状 - 它可能有效，但不如破折号数组好。从好的方面来说，它是纯 CSS 的，不需要额外的形状。
Codepen 示例：
【讨论】：
对于底部有 50 个破折号的边框，创建 50 个 div 并增加 margin-left，并创建一个带有 overflow:hidden 的整体容器。
【讨论】：