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

发布时间：2020-12-14 22:55:45 所属栏目：资源来源：网络整理

导读：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-

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不适用于这些元素？是否有一个标准指定哪个是正确的行为？


最佳答案


Why does border-radius not 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),那么这是规范违规,因此可以被视为错误.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!