反向重复线性梯度

Question

我使用这段代码来创建一个有点虚线的边框:

CSS

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

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

注意

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

编辑

我已经创建了一个小提琴来说明我想要实现的目标。

基本上我是在做某种形式的图例，现在条形图以透明的颜色开始，但我想让它以粉红色开始，这样它就能和上面的条形图对齐了

Answer 1

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

如果你把它改成:

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

这给你一个transparent区段为20px，然后#ffaacd区段为10px。与原文相反

Answer 2

尽管这不是你直接要求的，但我建议你使用CSS outline，因为它确实是你想要的(虚线边框，不影响布局)，而且更简单:

.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>