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> ```