我在让 Chrome 支持子元素的边框半径时遇到了一些麻烦。
这是设置:
<div class='wrapper'>
<img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' />
</div>
如果包装器是一个定位元素(例如 position: relative)并且有一个 border-radius，那么 border radius 将不会应用于 img 内容。
它也不一定是图像。任何填充背景的内容。
这是一个展示问题的简化示例页面。在 Safari、Mobile Safari、Firefox 或 IE 中查看，图像的 Angular 将被剪裁成圆 Angular 。在 Chrome 中查看图像溢出 Angular 落(尽管溢出:隐藏的 css)并且看起来很丑。
看看: https://dl.dropbox.com/u/433436/no-rounding/index.html
问题: 有没有一些不太疯狂的解决方法？有谁知道为什么这会影响一个基于 WebKit 的浏览器而不影响其他浏览器？也许这很快就会在 Chrome 中更新？
最佳答案
您需要删除position: relative
如果您的真的需要相对位置，那么您可以对元素进行双重包装:
HTML:
<div class="outer">
<div class="wrapper">
<div class="inside">
</div>
</div>
</div>
CSS:
.outer {
position: relative;
}
.wrapper {
width: 100px;
height: 100px;
overflow: hidden;
border: 3px solid red;
border-radius: 20px;
}
.inside {
width: 100px;
height: 100px;
background-color: #333;
}
查看这些相关问题:
关于google-chrome - Chrome 不支持 child 的边框半径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12504198/