基于背景的边框颜色

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

---

使用相同的想法甚至更简单（或至少更干燥）：

.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 { 
    // set opacity to darken, to lighten use rgba(255,255,255,0.X)
    // any other color can be used too
    border: 2px solid rgba(0,0,0,0.2); 

    // make sure bg is layed under border
    background-clip:border-box; 
}

演示

---

将此视为使用 rgba() 颜色的提醒，如 hsla() 颜色

Answer 4

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

1. 作为@user3341679的答案，使用

   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 方式使边框变暗。

放大使边框颜色变暗。