jsFiddle
HTML
CSS
body {
background-color: blue;
}
div {
background-image: url(http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
background-size: cover;
}
div, img {
width: 100px;
height:100px;
border-radius: 50%;
}
IMG
当在图像上应用border-radius时,仍然可以单击已舍入的区域.如果您单击并拖动圆圈外的区域,您将看到它是可能的.
DIV
但是,当您将border-radius应用于div时,舍入区域不是div的一部分,它实际上是一个圆.
它似乎不仅适用于img but to object and video too(感谢web-tiki的评论).为什么border-radius不适用于这些元素?是否有一个标准指定哪个是正确的行为?