2

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

CSS

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

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

笔记

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

编辑

我创建了一个Fiddle来说明我想要实现的目标。

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

4

3 回答 3

1

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

如果您将其更改为：

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

这会给你一个transparent20px 的部分，然后是一个#ffaacd10px 的部分。这与原作相反。

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

于 2016-06-23T21:29:42.623 回答
0

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

.elem {
  width: 200px;
  height: 200px;
  outline: 2px dotted hotpink;
}
<div class="elem"></div>

于 2016-06-23T21:40:18.347 回答
0

要获得反向图案，您必须只交换颜色，而不是长度。颜色停止值的长度应该是连续的，如果较小的跟随较大（如...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>

于 2016-06-23T21:58:19.573 回答