CSS实现图片阴影效果

2021-07-12 02:03

阅读：689

标签：src no-repeat ima img position orm webkit filter html

title>无标题文档title>
style type="text/css">
   /*方法一：使用一个GIF文件的方法*/
   .gifshadow 
   {
    padding:4px 10px 10px 4px;
    border:0;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    background-image: url(shadow.gif);/*换成你的图片*/
    background-repeat: no-repeat;
    background-position: right bottom;
   }
   /*方法二：使用滤镜*/
   .cssshadow 
   {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#000000‘)";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#000000‘);
   }
   /*方法三：使用2个PNG图片，滑动门技术，可实现柔边阴影*/
   .pngshadow{
            float:right;
    background:url(right_buttom.png) no-repeat bottom right;
    padding:0 10px 10px 0;
            
        }
        .pngshadow div{
    background:url(left_top.png) no-repeat ;
        }
        .pngshadow img {
            border:1px solid #FFFFFF;
            padding:4px;
        }
style>
head>
body >
效果1:
img class="gifshadow" src="1.jpg"/>

效果2:
img class="cssshadow" src="1.jpg" />

效果3:
div class="pngshadow">
div>img src="1.jpg" />div>
div>
body>
html>