background-clip · CSS基础

## background-clip属性 background-clip属性指定背景绘制区域。 JavaScript 语法:object object.style.backgroundClip="content-box" * * * ## 语法 ~~~ background-clip: border-box|padding-box|content-box; ~~~ | 值 | 说明 | | :-- | :-- | | border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 | | padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 | | content-box | 背景绘制在内容方框内（剪切成内容方框）。 | ## * * * 实例 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> #example1 { border: 10px dotted black; padding:35px; background: yellow; } #example2 { border: 10px dotted black; padding:35px; background: yellow; background-clip: padding-box; } #example3 { border: 10px dotted black; padding:35px; background: yellow; background-clip: content-box; } </style> </head> <body> <p>No background-clip (border-box is default):</p> <div id="example1"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <p>background-clip: padding-box:</p> <div id="example2"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <p>background-clip: content-box:</p> <div id="example3"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </body> </html> ```