CSS 边框 阴影 效果

CSS 边框 阴影 效果

以下将css实现阴影效果，以便须要朋友们，直接上代码

#shadow1{

width: 200px;

height: 100px;

color: white;

background-color: red;

box-shadow: 5px -5px 1px 1px #000;

-webkit-box-shadow:5px -5px 1px 1px #000;

-moz-box-shadow:5px 5px 1px 1px #000;

    /* For IE 8 */

    -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=120, Color='#1000');

    /* For IE 5.5 - 7 */

    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=125, Color='#1000');

}

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbmhvbmd3dTY2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

#shadow2{

width: 420px;

height: 650px;

background: url(1.jpg) no-repeat;

margin-top: 20px;

box-shadow: 10px 8px 10px 3px #000;  /*Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+*/

-webkit-box-shadow: 10px 8px 10px 3px #000;

-moz-box-shadow: 10px 8px 10px 3px #000;

/*background-clip: padding-box;*/

opacity: 0.9; /*透明度*/

}

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbmhvbmd3dTY2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

阴影的样例就到这里，文章简陋。不足之处还请大神多多指正。谢谢...