相关疑难解决方法(0)

当容器有时,我的容器内容不应该被切断border-radius吗？

示例HTML和CSS:

<div class="progressbar">
    <div class="buffer"></div>
</div>

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

正如你所看到我border-radius在container(.progressbar)上使用的那样,但是content(.buffer)在容器之外.我在Google Chrome上看到了这一点.

这是预期的行为吗？

PS这不是关于如何解决它,这是关于它是否应该像这样工作.

如果我使用此代码,图像不会被div的圆角修剪(导致图像的方角覆盖div的圆角):

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

有谁知道如何获得圆角corder div以防止儿童图像溢出？

我有一个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线程表明此行为是"按设计":

如何使用CSS3防止图像溢出圆角框？

然而,在挖掘CSS3背景和边界的工作草案时......

http://www.w3.org/TR/css3-background/#corner-clipping

......我忍不住注意到"角落剪裁"部分下面的描述:

剪切到边框或填充边缘的其他效果(例如"溢出"除"可见"之外)也必须剪切到曲线.替换元素的内容始终被修剪为内容边缘曲线

那我错过了什么？内容是否应该被剪切到角落？我在看过时的信息吗？我做错了吗？

我正在为朋友建立一个网站,他的部分规范是图像应该包含以更高分辨率查看图像的链接.我将主图像包含在div中的一个anchortag中,但我无法弄清楚为什么我的图像的边距空间是可点击的.

我假设它与div内部的图像有关？

这是我的jfiddle:http://jsfiddle.net/9kSL3/5/

以下是感兴趣的领域:

<div id="home">
<a href="./images/home3.jpg"><img src='http://s17.postimg.org/4glpnzdan/home3.jpg' border='0' alt="home3" /></a>
</div>



#home img{
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*border-radius: 15px;
    border: 1px;*/
}

对我来说很奇怪的是,在这个答案中:删除可点击图像周围的空间,答案是使用边距而不是填充