首页 > web前端 > html教程 > HTML CSS边框阴影的实现_html/css_WEB-ITnose

HTML CSS边框阴影的实现_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:33:41
原创
2926 人浏览过

一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器。

<!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边框阴影</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>
登录后复制

效果图

需要两张图片

 

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板