我想知道在不扩展尺寸的情况下为边框添加边框的最佳方法是什么。
据我所知，有两种方法可以实现它：box-sizing:border-box;和插入box-shadow。使用哪一个是明智的？为什么？
答案 0 :(得分：4)
嗯box-shadow不是边界，它是一个影子，所以这个问题几乎可以解决。
如果您希望在不增加元素尺寸的情况下添加边框，则可以使用box-sizing: border-box，因为这是它的设计目标。
此元素上指定的宽度和高度（以及相应的最小/最大属性）确定元素的边框。也就是说，元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制。
但请注意，Firefox仅支持带前缀的版本：-moz-box-sizing: ...。
答案 1 :(得分：2)
我建议使用box-sixing:border-box;，因为它不会影响与常用CSS边框相关的元素内容。插入阴影可能与内容重叠。除此之外，像Mathias评论的box-sizing:border-box还有更好的浏览器支持。
答案 2 :(得分：0)
官方方式当然是使用box-sizing: border-box。这将包括边框和元素宽度和高度的填充。
如果使用具有展开距离的阴影，则可以获得与边框相同的效果，但阴影不是元素尺寸的一部分，因此它可能会重叠元素外部的内容以获得常规阴影和如果使用inset阴影，则元素内的内容。它也不同于使用box-sizing，因为任何填充都会增加元素的大小。
使用box-shadow的一个好处是您可以实现multiple faux-borders。您不能使用常规border属性执行此操作。