背景与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阴影混合的问题

回答

相关问题