替换为 css 轮廓颜色：反转答案

【问题标题】：Substitute to css outline-color: invert替换为 css 轮廓颜色：反转
【发布时间】：2015-03-11 12:20:25
【问题描述】：

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

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

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

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

在outline-color: invert 渲染为黑色背景上的outline-color: rgb(255,255,255) 之前。）

感谢您的想法。

【问题讨论】：

你有 JavaScript 吗？
是的，当然；）但这不是重点。
我想不出用纯 CSS 来做到这一点的方法。 CSS 预处理器可以做到这一点；或 JavaScript。无论如何，这会很复杂。
是的，我就是这么想的，但是如果某个 css 向导找到了一种方法来通过阴影和混合的巧妙组合来做到这一点，我不会感到惊讶...... :)

标签： javascript html css colors

【解决方案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

【讨论】：

我对此印象深刻 (extended demo);我之前没有遇到过mix-blend-mode。
和 davidThomas 一样，对这个把戏印象深刻，以前从未见过。感谢@FrederikKrautwald 的这个好技巧；）