边框的阴影

网页里面,好多时都希望为边框加上阴影效果,看上去似乎凸显浮现,呼之欲出,比方说,页面的边线,对话框的边框,等等。

过去,我只知道是用图片,让美工将图切出来,然后就是排列,将位置对齐。这是一件非常麻烦的事情,常常要花去不少的工夫。今时今日,如果还有谁按照这种速率去干活,公司可能就要吃屎了。

今天我才知道,原来可以用CSS来搞。欢迎来搞。


代码是这样的:

CSS

	#sl-shadow
	{
	    padding:20px;
	    
		/* sane web browsers */
		-moz-box-shadow:1px 3px 12px #bbb;
		-webkit-box-shadow:1px 3px 12px #bbb;
		box-shadow:1px 3px 12px #bbb;
		
		/* gte ie8 */
		-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";
		
        /* lte ie7 */ 
        width:500px;
        *background: #fff;
        *filter: 
            progid:DXImageTransform.Microsoft.Shadow(color='#ffffff',direction=0,strength=0) 
            progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',direction=90,strength=4) 
            progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',direction=180,strength=4) 
            progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',direction=270,strength=4);
	}

DIV

<div id="sl-shadow">
    恭喜发财,利屎逗来!
</div>

之所以写这么多句CSS,是因为浏览器的兼容问题。尤其是IE,恶心得很。

值得一提的是,IE7这里,除了要指定background,还务必要指定width,否则出不来效果。


惨痛教训:

IE就不要搞这些边框了,页面会变得奇慢无比!


参考文章:

跨浏览器实现投影(box-shadow)那点事

CSS3属性box-shadow使用教程





posted on 2012-02-02 19:02  左直拳  阅读(188)  评论(0编辑  收藏  举报

导航