CSS溢出：隱藏在圓圈內

我想隱藏圓形div的溢出。其子DIV是隱藏在容器外區（好），但仍可見當年只能在外面半徑區域（壞）CSS溢出：隱藏在圓圈內

.outer{ 
    position:relative; 
    border-radius: 50%;    
    width: 200px; 
    height: 200px; 
    background:#dedede; 
    overflow: hidden; 
} 
.inner{ 
    position: absolute; 
    top:150px; 
    left:150px; 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    background:#98de45; 
}

總的來說，我想在http://buildinternet.com/project/mosaic/1.0但用圓圈達到的效果 - 有沒有辦法做到這一點？

小提琴： http://jsfiddle.net/a9Feu/

編輯：這工作正常，在Firefox和IE 10，而不是Chrome或Safari

來源

2012-05-21 smallhours

它在IE 10工作正常 - 您所使用 –

可能與HTTP瀏覽器的詳細信息，更新你的問題：//計算器.com/questions/10616668 /如何隱藏畫布內容從父母圓角在任何webkit的mac –

是的！它看起來像是同樣的問題......任何解決方法？ – smallhours

喜歡這個？

.outer{ 
    position:static; 
    border-radius: 50%;    
    width: 200px; 
    height: 200px; 
    background:#dedede; 
    overflow: hidden; 
} 
.inner{ 
    position: static; 
    top:150px; 
    left:150px; 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    background:#98de45; 
}

來源

2012-05-21 22:38:48

有趣的是，定位是什麼導致它無法正常工作。但是，如果我是你，我會編輯你的解決方案，將'.inner'中的'top'和'left'屬性改爲'margin-top'和'margin-left'，這樣方塊就可以正確定位。對於OP來說，是否需要靜態元素是另一個問題。 – ScottS

然後你應該使用HTML canvas而不是css。我找到了一些關於它的東西，給我一些時間來再次找到它。 –

繼續ScottS雖然...如果我需要使用絕對位置？ –

我希望這應該工作

http://jsfiddle.net/a9Feu/35/

.inner{ 
    position: absolute; 
    **border-bottom-right-radius: 100% 110%;** 
    top:150px; 
    left:150px; 
    width: 38px; 
    height: 35px; 
    background-color: red; 
    background:#98de45; 
}

來源

2012-05-22 06:31:41

CSS溢出：隱藏在圓圈內

回答

相關問題