使用 background-clip 实现透明边框

您是否曾经在页面上看到过带有透明边框的元素？我认为 Facebook 最初推广了这种效果，催生了像 Facebox 这样的灯箱插件。我认为 Facebook 现在不再使用这种外观了，但它仍然相当简洁。

您可能会认为这很简单，就像这样

#lightbox {
   background: white;
   border: 20px solid rgba(0, 0, 0, 0.3);
}

但是，在元素上设置透明边框将显示边框下元素自身的背景。

幸运的是，有一个 CSS3 属性可以拯救我们！它被称为 background-clip，专门用于指定应使用哪个盒子模型部分来显示背景。它做的事情正如它的字面意思，它在盒子模型的指定部分切断了背景。它可以有三个值，并且需要使用供应商前缀。以下是它可以具有的三个设置。您不会一次使用它们全部，这只是为了方便显示

#lightbox {

  -moz-background-clip: border;     /* Firefox 3.6 */
  -webkit-background-clip: border;  /* Safari 4? Chrome 6? */
  background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
  -moz-background-clip: padding;     /* Firefox 3.6 */
  -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
  background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
  -moz-background-clip: content;     /* Firefox 3.6 */
  -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
  background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
}

以下是示意图

所以，我确定您知道我要说什么了……如果我们将 background-clip 设置为 padding-box，白色背景将在边框之前结束，并且透明度将覆盖其他内容，从而实现我们想要的效果！

查看演示

相关：background-origin

在我们的灯箱示例中，背景很可能是纯色。在这种情况下，background-origin 基本上无关紧要，因为没有人能够分辨出颜色是从哪里“开始”的。但是，如果元素的背景是图像，那么背景的起始点就非常重要了。

这与 background-clip 相关，因为如果 background-clip 是 padding-box 但 background-origin 保持默认的 border-box，则一些 background-image 将被切掉，这可能是或可能不是我们想要的。

以下是示意图

以及一个可视化示例

浏览器兼容性

适用于：Safari 5、Chrome 7、Firefox 3.6+、Opera 10、IE 9

我仅测试了这些现代浏览器，并且支持良好。它可能（并且很可能）在非 IE 浏览器中可以追溯到更早的版本。

如果您需要更完整的浏览器兼容性，则始终可以使用双 div 方法。

<div id="lightbox">
   /* Set transparent background with PNG
       add padding to push inside box inward */

   <div id="lightbox-inside">
      /* Set white background in here */
   </div>

</div>

双 div 方法的另一个优点是您可以实现真正的圆角边框。不幸的是，使用 background-clip 方法，外边框是圆形的，但背景边缘保持直角。

可惜我们没有类似 background-radius 的东西来修复它

#lightbox
   border-radius: 16px;
   padding: 8px;

   /* NOT REAL */
   background-radius: 8px;
}

奇怪之处

致谢

感谢 Alex Hall 提供最初的想法和帮助。

这是一个简单的演示，也显示了 background-clip 的不同值

Check out this Pen!

以及 background-origin

Check out this Pen!