我有一个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线程指示此行为是“设计使然”:
…我不禁注意到“拐角裁剪”部分中的以下描述:
剪切到边框或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须剪切到曲线。替换元素的内容始终修剪到内容边缘曲线
那我想念什么呢?是否应该将内容夹在角落?我在查看过时的信息吗?我做错了吗?
这不是设计使然,Firefox对此存在一个突出缺陷。在任何WebKit浏览器中都可以正常工作。在Firefox中,您也必须将边框半径添加到所包含的元素中,或者使用某种hack。