背景與CSS陰影混合的問題

我正在嘗試使基本上是徑向漸變的文本元素。我認爲我可以通過取一個圓形的白色容器然後添加一個白色的盒子陰影來做到這一點，但陰影開始的顏色和div的背景顏色在chrome中不匹配，並且border-radius屬性是在Firefox中造成奇怪的邊框。背景與CSS陰影混合的問題

我喜歡一些投入，我創建了這個codepen，但這裏是代碼...

http://codepen.io/syren/pen/tcdBz

div.feature{ 
    background:#000; 
    width:100%; 
    height: 300px; 
} 

div.text{ 
    width: 300px; 
    height: 300px; 
    background: white; 
    padding: 130px 0 0; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border-radius: 160px; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: bold; 
    box-shadow: 0 0 50px 50px #fff; 
    margin: 0 auto; 
}

謝謝！

來源

2013-02-21 Syren

尼斯的..在Firefox的邊界。。好一個。 – 2013-02-21 23:59:12

這裏有一個修復/解決辦法：

div.text{ 
    width: 300px; 
    height: 170px; 
    background: white; 
    padding: 130px 0 0; 

    border:solid 1px white; 
    border-radius: 50%; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: bold; 
    box-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 50px 30px #fff,0 0 50px 40px #fff; 
    margin: 0 auto; 
}

馬車邊框有背景的顏色，所以現在box-shadow覆蓋它

Updated Pen

來源

2013-02-22 00:49:39 jotavejv

背景與CSS陰影混合的問題

回答

相關問題