用CSS给图片加个带阴影的边框代码

代码简介:

又一个CSS图片边框阴影效果,很不错的,自动适应图片大小,也就是背景会随着图片的大小自动改变,不失真,从国外网站搞下来的,用到有两个背景图像,预览时可以下载。虽然有时候可以不用背景图像就可以实现CSS阴影,但感觉用图片实现的这种效果看上去更自然一些。

代码内容:

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用CSS给图片加个带阴影的边框代码 - www.webdm.cn</title>
<style>
.dropshadow2
{
float
:left;
clear
:left;
background
: url(http://www.webdm.cn/images/20091006/shadowAlpha.png) no-repeat bottom right !important;
background
: url(http://www.webdm.cn/images/20091006/shadow.gif) no-repeat bottom right;
margin
: 10px 0 10px 10px !important;
margin
: 10px 0 10px 5px;
padding
: 0px;
}
.innerbox
{
position
:relative;
bottom
:6px;
right
: 6px;
border
: 1px solid #999999;
padding
:4px;
margin
: 0px 0px 0px 0px;
}
.innerbox
{
/* IE5 hack */
margin
: 0px 0px -3px 0px;
margin
: 0px 0px 0px 0px;
}
.innerbox p
{
font-size
:14px;
margin
: 3px;
}
</style>
</head>
<body>
<div class="dropshadow2"><div class="innerbox"><img src="http://www.webdm.cn/images/wall8.jpg"></div></div>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!

</p>

 

代码来自:http://www.webdm.cn/webcode/82262d72-2c2b-41d9-ab28-7ac2ce1de0a1.html

posted @ 2011-12-24 12:11  网页代码站  阅读(939)  评论(0编辑  收藏  举报