具有border-radius的元素的可选区域不一致

的jsfiddle

HTML

CSS

body {
    background-color: blue;
}

div {
    background-image: url(https://img.php1.cn/3cd4a/1eebe/cd5/8ad8f3bf8da691df.webp);
    background-size: cover;
}
div, img {
    width: 100px;
    height:100px;
    border-radius: 50%;
}

IMG

当border-radius应用于图像时,仍然可以单击已舍入的区域.如果您单击并拖动圆圈外的区域,您将看到它是可能的.

DIV

但是,当您应用于border-radiusa时div,圆角区域不是其中的一部分,div它实际上是一个圆圈.

看来这不仅适用于img 而是object和video太(感谢网络的tiki的评论).为什么border-radius不适用于这些元素？是否有一个标准指定哪个是正确的行为？