一尘不染

CSS3边界半径裁剪问题

css

我有一个div,其border-radius设置为某个值(比方说10px),还有一个嵌套的div,它是其父级的完整宽度和高度。

<!-- ... -->
<style type="text/css">
div.parent {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #0000ff;
    overflow: hidden;
}
div.inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
    <div class="inner"></div>
</div>
<!-- ... -->

我注意到,尽管溢出被设置为隐藏,但父母并没有将孩子夹在圆角上。另一个stackoverflow线程指示此行为是“设计使然”:

…我不禁注意到“拐角裁剪”部分中的以下描述:

剪切到边框或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须剪切到曲线。替换元素的内容始终修剪到内容边缘曲线

那我想念什么呢?是否应该将内容夹在角落?我在查看过时的信息吗?我做错了吗?


阅读 293

收藏
2020-05-16

共1个答案

一尘不染

这不是设计使然,Firefox对此存在一个突出缺陷。在任何WebKit浏览器中都可以正常工作。在Firefox中,您也必须将边框半径添加到所包含的元素中,或者使用某种hack。

2020-05-16