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不适用于这些元素？是否有一个标准指定哪个是正确的行为？
Why does
border-radiusnot apply to these elements?
已知基于WebKit的浏览器存在围绕border-radius和replaced elements的问题,例如img,对象和视频元素.我不清楚为什么它不会发生某些其他替换元素,如表单元素,但替换元素通常是大多数浏览器的一个难点.
从历史上看,有些浏览器无法在视觉上剪切内容,就好像border-radius完全没有效果一样.似乎最近版本的WebKit / Blink纠正了这一点,但并非完全如此.
Is there a standard which specifies which is the correct behavIoUr?
正确的行为是被替换的内容应该被border-radius剪切,并且剪切区域上的任何指针事件都不能被剪切的内容处理. section 5.3 of Backgrounds & Borders的前两段非常清楚地说明了这一点.
如果Chris Coyier在his claim中是正确的,被替换的内容忽略了剪辑,因为它是被剪辑的容器而不是内容(实际上是the expected behavior for non-replaced elements with overflow: visible),那么这是规范违规,因此可以被视为错误.
