background-clip 及其应用

[nfssuzukaze]

background-clip

属性值：

• border-box 背景延伸到 border 的外沿（注意是背景而不是背景图片，对背景图片的设置需要配合 background-origin）
• padding-box 背景延伸到 padding 的外沿（注意是背景而不是背景图片，对背景图片的设置需要配合 background-origin）
• content-box 背景延伸到 content 的外沿（注意是背景而不是背景图片，对背景图片的设置需要配合 background-origin）
• text 将背景色设置为文字的前景色

如果 background-clip 设置值为 border-box，padding-box，content-box 时没有配合 background-origin 使用的话，可能会出现一些奇怪的现象，如

应用

Example1

text 属性值在 webkit 内核浏览器上的使用

Example2

background-clip 与 background-origin 配合调节背景图片的延伸

• 令 background-clip 与 background-origin 相等
  • 当值为 border-box 时，背景图片就会延伸到 border 的外沿
  • 当值为 padding-box 时，背景图片就会延伸到 padding 的外沿
  • 当值为 content-box 时，背景图片就会延伸到 content 的外沿