首页 > web开发资料 > DIV&CSS > css div 边框阴影

css div 边框阴影

分类:DIV&CSS   时间:2011-06-21 13:52:32   点击:

两种实现方法一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div来实现的这种效果更漂亮。
 简单一点的纯css

<head>
 <meta http-equiv="content-type" content="text/html; charset=gb2312" />
 <title>css div 边框阴影</title>
 <style type="text/css">
 body {padding: 200px;}
 div {border-width: 1px; border-style: solid; padding: 1px;}
 .a {background-color: #f3f3f3; border-color: #fbfbfb;}
 .b {background-color: #d8d8d8; border-color: #e8e8e8;}
 .c {background-color: #fff; border-color: #bbb; height: 100px;color:#ff0000;}
 </style>
 </head>
 <body>
 <div class="a">
   <div class="b">
     <div class="c">边框为阴影效果</div>
   </div>
 </div>
 </body>
 </html>

复杂一点的利用图片背景

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.027eat.com/tr/xhtml1/dtd/xhtml1-transitional.dtd">
 <html xmlns="http://www.027eat.com/1999/xhtml">
 <head>
 <title>css边框阴影</title>
 <style>
 .drops教程hadow2{
  float:left;
  clear:left;
  background: url(http://www.6a8a.com/uploadfile/2011/0621/20110621015322996.png) no-repeat bottom right !important;
  background: url(http://www.6a8a.com/uploadfile/2011/0621/20110621015329456.gif) no-repeat bottom right;
  margin: 10px 0 10px 10px !important;
  margin: 10px 0 10px 5px;
  width: 500px;
  padding: 0px;
 }
 .innerbox{
  position:relative;
  bottom:6px;
  right: 6px;
  border: 1px solid #999999;
  padding:4px;
  margin: 0px 0px 0px 0px;
 }
 .innerbox{
  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>

上一篇:两款js图片等比例缩放(兼容IE6,IE7,FF)
下一篇:CSS优先权与 执行顺序