html - 基于背景的边框颜色

Question

我经常在我的 SASS 样式中使用 darken 和 lighten 。我目前正在编写一个有边框的类，但背景颜色将依赖于另一个类。我想要做的是将边框颜色设置为元素背景颜色的 darken。

像这样:

.blue { background: #00f; }
.red  { background: #f00; }

.border { border: 2px solid darken(background, 20); }

那么标记将是:

<div id="colored-box" class="blue border">
  <p>
    I have a dark blue border!
  </p>
</div>

<div id="colored-box" class="red border">
  <p>
    I have a dark red border!
  </p>
</div>

当然，如果这像我在这里写的那样有效，我就不会将其作为问题发布到 SO :)

所以问题是:我能否根据 background 属性动态地设置border 颜色，如果可以，怎么做？

Answer 1

虽然不是 SASS 解决方案，但您可以只使用 rgba。

.border {
  border: 2px solid rgba(0,0,0, 0.25);
}

查看此 jsfiddle举个例子。