本节主要讲 background-clip 属性。clip 有修剪之意，background-clip 指裁剪元素的背景，作用于背景颜色和背景图像，其实就是设定元素的背景延伸到何处，共有四个属性值可供选用：① border-box（默认，背景延伸到边框外缘），② padding-box（修剪到内边距外缘，背景延伸到内边距与边框内缘的衔接处），③ content-box（修剪到内容区域外缘，背景延伸到内容区与内边距内缘衔接处），④ text（按文本样貌修剪背景，背景将“延伸到”文本之上，即只在内容区域的文本笔画上面呈现背景）。下面的演示，演示div盒子设置了元素的边框、内边距、较大的字号以及背景色和可选的背景渐变图像，从而能更好地体现出四个属性值被设定后 background-clip 属性的具体表现：

border-box padding-box content-box text || 使用渐变背景

前三个属性都是标准属性，除了已经废弃的IE外，所有现代浏览器均完好支持。第四个属性，text，背景颜色或图像被剪裁成文字背景，是个冷门属性，最新版的Chrome、Edge、Firefox均已支持，但不是最新版本的不好说，补救方法是在 background-clip 前加一个前缀-webkit-即可。具体代码举例如下：

要使用 text 属性，应将元素的前景色 color 设置为透明，可以使用如下方法的任意一种：

同时，最好不要设置 text-shadow 即文本阴影属性，因为这个属性的颜色在渲染前景色时会直接取代前景色的 transparent 透明值，实在非设置不可时，建议使用透明度较大的 rgba 或 hsla 颜色值以减少阴影颜色对前景色的干扰。