主页 / 建站知识 /

CSS控制背景图像平铺实现边框阴影效果

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
一款用CSS控制背景图像平铺，从而实现区域边框阴影的效果，虽然用到了图片，但可贵之处是本代码不管你需要阴影的区域是多大，它都能自动适应，因些还是很值得收藏一下的，兼容所有的IE浏览器。

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<title>CSS边框阴影</title>
<style>
.dropshadow2{
float:left;
clear:left;
background: url(/jscss/demoimg/200903/shadowAlpha.png) no-repeat bottom right !important;
background: url(/jscss/demoimg/200903/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
width: 360px;
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"><h4>CSS阴影</h4> <p>这段边框阴影效果怎么样呢？</p></div></div>
</body>
</html>

效果图
上一篇：CSS3制作ajax loader icon实现思路及代码 下一篇：CSS 控制因Html页面高度导致抖动的问题解决方法

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by