-moz-border-radius: 50%
-webkit-border-radius: 50%
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25)
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25)
text-shadow: 0 -1px 1px rgba(0,0,0,0.25)
border-bottom: 1px solid rgba(0,0,0,0.25)
border-radius 圆角
圆角和阴影本身就是CSS3的属性 如果你在支持CSS3的浏览器上直接用圆角属性就可以了 然后在加阴影就不会出现这样的问题而不支持CSS3属性的浏览器你圆角是用图片模拟出来的 那么他也没有阴影的属性 所以也不会出现这样问题
所以你的问题就是给弄混了
在支持CSS3的浏览器上用自身的属性
在不支持CSS3的浏览器上用模拟的方法
还有在IE系列下你可以下一个CSS3的.HTC文件 他用微软自带的VML语法模拟出CSS3效果 具体的你可以百度
box-shadow:给元素块添加周边阴影效果。
语法:box-shadow: h-shadow v-shadow blur spread color inset
*还有另一种情况: box-shadow: 0 2px 2px #FECC84
当我们在色值前只写了三个数值的情况下,则第三个值是 blur (模糊距离)。
利用阴影属性,也可以实现外边框的效果:
当我们再为它添加一个 outline (轮廓),就会发现它实现了-边框内圆角:
* 关于为什么会这样:
outline的描边并不会跟着圆角走,因此显示为直角。
所以把这两者叠加到一起,box-shadow 则刚好填补描边与容器圆角之间的空隙。
*值得注意的是,box-shadow 阴影的大小值并不一定等于描边的宽度,它和圆角的大小有关系。所以只需要一个足够填补空隙的大小就可以了。事实上,制定一个等于描边宽度的值在某些浏览器中可能会渲染异常,所以,最好是稍小的值。
参考书籍: Lea Verou 《CSS揭秘》