用CSS產生圖片陰影

來源:互聯網
上載者:User

1、把 shadow.gif , shadow2.gif , shadow2.png 這三張圖上傳到伺服器,如root_path/img/

2、將下列語法貼到styles-site.css裡

.alpha-shadow {
CLEAR: both; BACKGROUND: url(root_paht/img/shadow.gif) no-repeat right bottom;
FLOAT: left; MARGIN: 14px 0px 0px 8px
}
.alpha-shadow DIV {
PADDING-RIGHT: 6px; PADDING-LEFT: 0px;
BACKGROUND: url(root_path/img/shadow2.gif) no-repeat left top;
FLOAT: left; PADDING-BOTTOM: 6px; PADDING-TOP: 0px
BACKGROUND: none transparent scroll repeat 0% 0%;
FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='root_path/img/shadow2.png',sizingMethod='crop')
}
.alpha-shadow IMG {
BORDER-RIGHT: #a9a9a9 1px solid;
PADDING-RIGHT: 4px;
BORDER-TOP: #a9a9a9 1px solid;
PADDING-LEFT: 4px;
PADDING-BOTTOM: 4px;
MARGIN: 0px;
BORDER-LEFT: #a9a9a9 1px solid;
PADDING-TOP: 4px;
BORDER-BOTTOM: #a9a9a9 1px solid;
BACKGROUND-COLOR: #fff
}

記得將圖片路徑改成你自己的圖片路徑

3、在你想要加入圖片的html裡加上:

<DIV class=alpha-shadow>
<DIV><IMG src="你的圖片"></DIV></DIV>
<BR style="CLEAR: both">

完工

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.