基于背景的边框颜色

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上发布这个问题：）

所以问题是：我可以在border属性动态上建立background颜色吗？如果是，怎么做？

Answer 1

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

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

请参阅此jsfiddle作为示例。

Answer 2

我会像这样使用mixin：

.darkenBorder(@color) {
    &.border { 
        background: darken(@color, 20);
    }
}

这样，您可以轻松地将黑暗的边框样式添加到任何颜色：

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

---

使用相同的想法更简单（或者更多DRY）：

.colorStyles(@color) {
    background: @color;
    &.border { 
        background: darken(@color, 20);
    }
}
.blue { .colorStyles(#00f); }
.red  { .colorStyles(#f00); }

<小时/> 输出：

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

Answer 3

如前所述，我会这样做，但安全重置background-clip;：

.border { border: 2px solid rgba(0,0,0,0.2);/* set here opacity to darken 
to lighten , use rgba(255,255,255,0.X) , any other color can be used too*/
background-clip:border-box; /* make sure bg is layed under border */
}

<强> DEMO

---

将此视为提示使用rgba（）颜色，如hsla（）颜色

Answer 4

有两种方法可以变暗边框颜色（目前 - 没有 sass）。

1. 作为 @user3341679's answer，使用 rgba()。
2. 正在使用过滤器 birghtness() 和 opacity()。

.box {
    border: 5px solid rgba(100, 100, 100, 1);
    filter: brightness(.72) opacity(.7);
}

完整示例：https://jsfiddle.net/3qwo85js/2/

图片预览

使用 2 种 css 方式使边框变暗。

放大变暗的边框颜色。