为什么CSS中为img或其边框设置border-radius效果相同？

问题原因分析 #

1. 两个场景效果一致的原因 #

border-radius是作用在整个元素上的样式属性，不是绑定在某个类、也不是单独作用于边框层。你两个场景最终都是给同一个img元素设置了border-radius:10px的属性，无非是属性写在.image类还是.border类的区别，元素最终计算得到的样式完全相同，自然渲染效果没有差异。

2. 为什么图片没有出现圆角，只有边框是圆角 #

这和border-radius的计算逻辑、你设置的参数有关：

• border-radius的圆角半径是从元素的最外边缘开始计算的
• 你给元素设置了10px的边框宽度，同时border-radius刚好也设为10px，那么整个圆角的弧度完全落在边框的区域范围内，不会延伸到内容（图片）所在的区域，所以图片的四个角完全不会被圆角裁剪，看起来就是直角。

验证&实现预期效果的方法 #

你可以把border-radius改成20px，就会看到边框和图片都会变成圆角：因为20px的半径已经超过了10px的边框宽度，圆角区域延伸到了内容层，图片会被裁剪出圆角效果。

如果想要实现你最初预期的「图片圆角、边框直角」的效果，不能直接给img元素同时加边框和圆角，需要用两层嵌套结构：外层套div加直角边框，内层img单独加圆角即可。

内容的提问来源于stack exchange，提问作者Stack Overflow