CSS3邊框半徑裁剪髮出

我有邊界半徑設置爲某個值一個div（假設10px的），和一個嵌套的div是其母公司的整個寬度和高度。CSS3邊框半徑裁剪髮出

<!-- ... --> 
<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> 
<!-- ... -->

我注意到，儘管溢出被設置爲隱藏，父母並沒有在圓角處夾住孩子。另一個計算器線程表明，這種行爲是「設計」：

How do I prevent an image from overflowing a rounded corner box with CSS3?

然而，在挖了CSS3背景和邊框工作草案...

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

......我不由得注意下下面的說明「角限幅」部分：

其它效果該剪輯的邊界或填充邊緣（如「溢出」比「可見的」其他）也必須夾到曲線。更換元素的含量始終修剪成內容邊緣曲線

所以我缺少什麼？內容是否被限制在角落？我在看過時的信息嗎？我做錯了嗎？

來源

2010-07-14 cdata

[編輯]我已經上傳了一個快速頁面，演示了我的問題：http://aethermedia.net/sandbox/border-radius-test.html – cdata 2010-07-14 20:34:11

您可以使用代碼段編輯問題嗎？您的鏈接已死亡。 – evolutionxbox 2016-08-03 13:39:58

它不是由設計，有一個outstanding defect in Firefox這個問題。應該可以在任何WebKit瀏覽器中正常工作。在Firefox中，您必須爲包含的元素添加邊框半徑，或者use some sort of hack。

來源

2010-07-14 17:29:20 robertc

+13

我很想相信，但我現在正在盯着webkit，但仍然看到問題= /但是，看到它被列爲錯誤，這是一個巨大的解脫！ – cdata 2010-07-14 17:30:43

@cdata有意思的是，如果你把兩個位置：你的樣式表中的相對線條都在Chrome 6中正常工作，那麼它是正確的。 – robertc 2010-07-14 17:52:36

哇，這是完全正確的..所以外觀是定位需要是靜態的正確剪輯？對我來說，看起來仍然很有趣...... ...當然，這在Firefox中仍然失敗。感謝您的幫助！我會堅持一點點的其他答案.. – cdata 2010-07-14 17:55:47

如果在這兩個元素刪除position: relative;外構件夾在孩子周圍的圓角。不知道爲什麼，如果它是一個錯誤。

來源

2011-02-17 20:16:39 knut

我來到這裏尋找一個答案，因爲我在Chrome 18

我想有一個圓形的盒子裏面它兩個元素也有類似的問題 - 標題和索引號 - 索引號爲絕對定位在盒子的左下角。

我注意到的是，如果我有這樣的HTML，標題元素會流血圓角（邊框半徑），即使溢出被設置爲隱藏父元素之外：

<a> 
    <div style="overflow:hidden; border-radius:15px; position:relative;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a>

但如果我搬到了相對定位了一個父元素的一切看起來很不錯：

<a style="position:relative;"> 
    <div style="overflow:hidden; border-radius:15px;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a>

來源

2012-05-06 19:45:00

只是想幫腔就這一個，因爲我發現這類似的問題。

在其溢出設置爲滾動一個div，滾動時，除非內容已滾動到的絕對頂部或底部邊框半徑沒夾的內容。即使如此，如果我將文檔滾動到絕對頂部或底部，裁剪只會有時重新出現。

在雲雀上，我爲元素添加了一個透明邊框，並且似乎強制在角上進行剪裁。由於我已經在元素周圍有了一些空間，所以我只是將它切成兩半，並將其餘部分應用到邊界厚度。不理想，但我最終得到了我想要的結果。

在Mac，Chrome，Safari和Firefox上測試。

來源

2013-05-01 16:08:29 Eric

CSS3邊框半徑裁剪髮出

回答

相關問題