background-clip · 跟老司机学CSS3

**background-clip** * 描述：检索或设置对象的背景向外裁剪的区域 * 版本：CSS3 新增属性 * 继承性：无 **语法** ``` background-origin:向外裁剪区域 ``` 向外裁剪区域 * padding-box：背景显示到 padding (包含 padding)，超出隐藏。 * border-box：背景显示到 border (包含 border)，超出隐藏。 * content-box：背景显示到 content (包含 content)，超出隐藏。 * text：根据内容的形状 (如 : 文字) 作为裁剪区域向外裁剪。 **使用说明** text 属性值，目前仅支持 webkit，通过 text 属性值可实现使用背景作为填充色之类的遮罩效果。 **代码示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-clicp</title> <style> #container{ width: 400px; height: 400px; border: 10px dotted; background-color: #336600; padding: 10px; background-clip:border-box; } </style> </head> <body> <div id="container"> </div> </body> </html> ``` 效果图 ![背景显示到border](https://box.kancloud.cn/3655b70d86d9b381c61eaf06c2d0b5ea_453x453.png)