js里的边框阴影其实是网页元素边缘的线条和投影效果。当你给div、span这些标签加粗细高亮的边框时，浏览器会自动算出边框的宽度和位置。要是再给元素加阴影，浏览器就会在边框外面再画个模糊的轮廓，这样看起来就像边框带了个黑边。就像你用粉笔在黑板上画个方框，再用手指在方框外抹个灰圈，这就是边框阴影的原理。

为啥会出现边框阴影呢？因为浏览器渲染时会先处理边框样式，再叠加阴影效果。根据W3C的渲染规范，border属性和box-shadow都是属于视觉层的内容，它们会按渲染顺序叠加。测试数据显示，Chrome浏览器在处理带阴影的边框时，平均会增加12%的渲染时间，而Firefox因为优化了阴影计算，只增加8%的时间。当边框宽度超过元素边长1/3时，阴影会和边框产生重叠，这时候就会看到双重边框的效果。就像你拿尺子量墙，如果尺子比墙还宽，就会量出双层边缘。