CSS小技巧：混合模式、渐变边框
混合模式
不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子：
// 你也可以尝试不同的样式
.blend {
background: #fff;
}
.blend img {
mix-blend-mode: darken;
}
渐变边框
现在，你甚至可以在边框中使用渐变。 要使用渐变边框非常简单，只需要设置一个更低z-index的伪元素即可：
.box {
margin: 80px 30px;
width: 200px;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
background-image: linear-gradient(90deg, yellow, gold);
}
复制代码具体的例子可以看这里，或者看这里使用的是background-clip和background-origin属性。在不久的将来，也许所有浏览器都将支持border-image属性，最终的代码会和下面一样：
.box {
border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%);
border-image-slice: 1; /* set internal offset */
}
THE END
