shadow add to an element's size

Possible Duplicate:
Is css box-shadow part of element's box model?

Does a css border-shadow property add to an element's size or is it added after and not effect other elements?

So say my div width is 100px, margin 10px, border 1px, padding 5px, box-shadow 2px, is the total width of the element 136px (inclusive of all the above) or 132px (just the first four).


no, the shadow doesn't affect the elements size (just like an outline; read more about this here). To answer the example: your div is 132px wide.


No, the box-shadow is not part of the element, meaning that the shadow is not considered in the final total measure of the element.

Source: http://css.flepstudio.org/en/css3/box-shadow.html


According to the CSS3 box-shadow specification:

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

For more information, see http://www.css3.info/preview/box-shadow/

The FireBug or Google Chrome inspectors are useful tools for this sort of thing, too.

链接地址: http://www.djcxy.com/p/75584.html

上一篇: 在IE中重叠元素的垂直对齐

下一篇: 阴影添加到元素的大小