thay thế để css outline-color: đảo ngược

Question

thời gian dài trước đây, với các trình duyệt lỗi thời (chrome38) mọi người có thể làm cho hộp ...

Đó là có thể sử dụng outline-color: invert để chọn một màu là ai hoàn toàn trái ngược của nền .

Hôm nay, một tính năng tuyệt vời như vậy không tồn tại nữa :(Do yo có một ý tưởng đối với tôi người chỉ muốn hiển thị hộp với biên giới của màu sắc đối lập với nền?

(ngày nay chrome (39) tính toán outline-color: invert-outline-color:transparent.

trước đó outline-color: invert render để outline-color: rgb(255,255,255) trên brackground đen.)

Cám ơn ý tưởng của bạn.

Answer 1

có lẽ thi s có lừa cho bạn không?

.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