基于背景的边框颜色

HTML CSS

梅

2020-03-24

我经常趁darken并lighten在我的SASS风格。我当前正在编写一个具有边框的类，但是将依赖于另一个类作为背景色。我要做的是将边框颜色设置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属性设置颜色吗？

第3715篇《基于背景的边框颜色》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
十三Jim 2020.03.24

正如已经说过的，我会这样做的，但是安全重置为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 */
}

演示

see this as a reminder of use of rgba() colors , as hsla() colors

老丝阿飞 2020.03.24

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

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

请参阅此jsfiddle作为示例。

Gil 2020.03.24

我会这样使用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;
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android