写在开始

在我日常的开发学习过程汇总，js所占的权重越来越大，好多页面呈现的部分也逐渐使用UI组件代替了，导致平常写CSS的机会其实并不是很多。但是作为前端三巨头之一的CSS，怎么能丢了排面！！所以决定开始练习下CSS~

声明

接下来的CSS学习笔记系列来源自 《CSS秘密花园》，笔记会同步至酱豆腐精的小站，欢迎围观~

正文开始

我们在想实现一个透明边框的时候，通常想到的可能是以下代码：

border: 3px solid rgba(255,255,255,0.6);

可是如果这时候给元素添加一个背景色或者背景图片，背景图片与背景色会透过透明边框显示出来。这是因为在默认情况下,背景会延伸到边框所在区域的下层。

先来看个栗子~

通过这个例子我们可以看到，元素的背景色被设置为蓝色，背景色设置为rgba(255,255,255,.6) ,此时，透过透明边框可以看到元素的背景色。

解决办法

通过添加 background-clip 来解决此类问题。

border: 3px solid rgba(255,255,255,0.6);
background-clip: padding-box;

background-clip属性是用来设置背景裁剪区域的，该属性接受三个参数：content-box | padding-box | border-box | text，裁剪区域如下：

1. content-box: content部分，背景被裁剪至内容区（content box）外沿。
2. padding-box: content + padding部分，背景延伸至内边距（padding）外沿。不会绘制到边框处。
3. border-box: content + padding + border部分，背景延伸至边框外沿（但是在边框下层）。
4. text: 裁剪为text前景色

具体用法可以参考MDN文档：background-clip。