想给网页标题做渐变金色的效果，写了渐变背景却发现字还是黑的，多半是background-clip没用对。这个属性管的是背景画到元素的哪一层为止，比想象中好用。

四个取值

  • border-box：默认值，背景一直铺到边框底下
  • padding-box：背景只画到内边距区域，边框底下露出来的是透明的
  • content-box：背景只覆盖内容区，范围最小
  • text：背景被裁剪成文字的形状，做渐变文字全靠它

文字渐变的固定写法

background: linear-gradient(90deg, #f5af19, #f12711);-webkit-background-clip: text;background-clip: text;color: transparent;

三行缺一不可。只写clip不写color透明，字照样被前景色盖住；不写webkit前缀，老一些的Safari和部分内核不认。Firefox从49版开始支持text值，现在兼容性已经不错。实际项目里，导航栏标题、会员标识、价格数字常用这招，配合背景位移动画还能做出流光效果。

两个容易踩的坑

一是和background-origin搞混：origin管背景从哪开始画，clip管画到哪截止，一个起点一个终点，名字像但职能不同。二是text值只适合纯文字元素，如果元素里还混着图标、边框，背景会在奇怪的地方露出来，这种时候单独套一层标签再裁。

顺带一个冷门玩法：border-box裁剪配合半透明边框，背景会从边框的缝隙里透出来，能做出描边高亮框，页面上很省事。

判断很简单：普通背景裁剪，border-box到content-box三选一；做渐变字，text加透明色加前缀一条龙写全，一次到位。