19

是否可以使用 CSS 来定义一条带有两种交替的虚线颜色的线（或形状边缘）？也就是说，如果 1 和 2 是不同颜色的像素，那么

1212121212121212 或 112211221122

我基本上想要一些方法来使用具有两种颜色的stroke-dasharray。线本身是完全着色的。

如果这是不可能的，有什么好方法来近似它？例如，我可以使用两种颜色交替创建一个重复的线性渐变，但这很难从 javascript 中设置两种颜色。

4

6 回答 6

33

这在只有一个元素的 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>

于 2012-09-25T03:48:29.033 回答
17

基于@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 片段更新：

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>

于 2013-03-22T19:29:38.957 回答
3

单程：

<!doctype html>
<html>
	<头部>
		<标题></标题>
		<风格>
分区 {
	宽度：100px；
	高度：100px；
}
.dashbox {
	边框：4px 蓝色虚线；
	背景：橙色；
}
.dashbox > div {
	背景：白色；
}
		</style>
	</head>
	<正文>
		<div class="dashbox">
			<div></div>
		</div>
	</正文>
</html>

也就是说，将一个元素与另一种颜色叠加在另一种颜色之后[以虚线的形式]。

于 2012-11-17T21:03:46.243 回答
1

这是一个仅限 CSS 的解决方案。

<div style="
    margin:1rem;
    width:4rem;
    height:4rem;
    border:5px solid red;
    outline:5px dashed green;
    outline-offset: -5px;"
></div>

于 2021-12-17T19:30:25.967 回答
0

一种可能对您有用的方法是在笔划上使用重复的线性渐变。这是一种适用于lines 的解决方法，因为您可以旋转渐变以匹配线条。

对于其他形状 - 它可能有效，但不如破折号阵列。从好的方面来说，它是纯 CSS 的，不需要额外的形状。

代码笔示例：

https://codepen.io/michbarsinai/pen/YzwXYwg

于 2020-06-07T00:27:58.217 回答
-3

对于底部有 50 个破折号的边框，使用递增创建 50 个 div，使用 . 创建margin-left一个整体容器overflow:hidden。

于 2012-09-30T00:28:57.843 回答