替换为 css outline-color: invert

Question

很久以前，使用过时的浏览器 (chrome38) 人们可以制作盒子...

可以使用 outline-color: invert 选择与背景完全相反的颜色。

今天，这样一个很棒的功能已经不存在了:(对于只想显示边框与背景颜色相反的框的我，你有什么想法吗？

(今天 chrome (39) 计算 outline-color: invert 到 outline-color:transparent。

在此之前 outline-color: invert 在黑色背景上呈现为 outline-color: rgb(255,255,255)。）

谢谢你的想法。

Answer 1

也许这对你有用？

.background {
  display: inline-block;
  margin: 10px;
  padding: 20px;
}
.box {
  border: 3px solid white;
  height: 100px;
  width: 160px;
}
.invert {
  mix-blend-mode: difference;
}

<div class="background" style="background: #ff0000">
  <div class="box invert"></div>
</div>

<div class="background" style="background: #000000">
  <div class="box invert"></div>
</div>

<div class="background" style="background: #ffffff">
  <div class="box invert"></div>
</div>

http://codepen.io/Frikki/pen/BNpKYb

替换为 css outline-color: invert

Substitute to css outline-color: invert

html

javascript

css

colors