I tried both "background-clip: padding-box" and "background-clip: content-box".They look the same?

13th Feb 2017, 5:13 PM

Jimmy Gan

1 Answer

+ 5

They are same if you don't set any padding to the element, as in this case, content-box and padding-box have exactly same size/position... Try this: #div1, #div2 { width:100px; height:100px; border: 3px solid black; background-color: red; padding:15px; } #div1 { background-clip: padding-box; } #div2 { background-clip: content-box; } With this: <body> <div id="div1">padding box</div> <div id="div2">content box</div> </body> The third value possible is 'border-box' which requiere a transparent and not null width to show a difference with 'padding-box' background clipping ^^

14th Feb 2017, 2:47 AM

visph