Question

很久以前，随着过时的浏览器（chrome38），人们可以制作盒子......

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

今天，这样一个伟大的功能不再存在了:(对于那些只想展示背景颜色相反的边框的人，你有什么想法吗？

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

之前outline-color: invert在黑色的底座上呈现给outline-color: rgb(255,255,255)。）

感谢您的想法。

Answer 1

也许这对你有用处？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

替换为css outline-color：invert

1 个答案: