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);

这为您提供了20px的transparent部分，然后是10px的#ffaacd部分。这与原作相反。

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

反向重复线性渐变

CSS

注意

修改

3 个答案: