反向重复线性渐变

Question

我正在使用这段代码来创建有点虚线的边框：

CSS

.strip {
    height: 5px;
    width: 80px;
    background: repeating-linear-gradient(90deg, transparent, transparent 10px, #ffaacd 5px, #ffaacd 30px);
}

我试图通过切换 transparent 和 #ffaacd 及其相应的长度来反转颜色，但它不起作用。我会得到一条粉红色的直线。

备注

请注意我不能使用 border 因为它会影响某些布局所以我宁愿只使用背景。

编辑

我创建了一个 Fiddle 来说明我正在努力实现的目标。

基本上我正在做某种形式的图例，现在条带以透明颜色开始，但我希望它以粉红色开始，以便它与上面的条带对齐。

Answer 1

你的长度偏移有点奇怪。如果你想要硬停止，你应该让 #ffaacd 和 transparent 部分的颜色停止在 10px。

如果你把它改成：

background: repeating-linear-gradient(90deg, transparent, transparent 20px, #ffaacd 20px, #ffaacd 30px);

这会为您提供 20 像素的 transparent 部分，然后是 10 像素的 #ffaacd 部分。这和原来的相反。

有关工作示例，请参阅 this JSFiddle。

Answer 2

即使这不是您直接要求的，我还是建议您使用 CSS 大纲，因为它完全符合您的要求（不影响布局的虚线边框）并且更简单：

.elem {
  width: 200px;
  height: 200px;
  outline: 2px dotted hotpink;
}

<div class="elem"></div>

Answer 3

要获得反转图案，您必须只交换颜色，而不是长度。色标值长度应按连续顺序排列，如果较小的跟随较大的（如您的代码段中的 ...transparent 10px, #ffaacd 5px...），则后面的值被限制为前者（即您的情况下为 10px）。

一些概念验证变体：

.strip {
  background: repeating-linear-gradient(to right, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to bottom, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to right, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to bottom, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%);
  background-size: 1000px 5px, 5px 1000px, 1000px 5px, 5px 1000px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top center, center right, bottom center, center left;
}

.strip-inv {
  background: repeating-linear-gradient(to right, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to bottom, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to right, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to bottom, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%);
  background-size: 1000px 5px, 5px 1000px, 1000px 5px, 5px 1000px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top center, center right, bottom center, center left;
}

<textarea class="strip">resize me</textarea> <textarea class="strip-inv">resize me</textarea>

反向重复线性渐变

Reverse repeating linear gradient

html

css

linear-gradients

gradientstop

CSS

备注

编辑