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);
}
复制代码

您可以在此处或此处使用背景剪辑和查看具体示例背景-origin属性。在不久的将来，也许所有浏览器都会支持 border-image 属性，最终的代码将如下所示：

.box {
    border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%); 
    border-image-slice: 1; /* set internal offset */
}