分类

链接

2012 年 1 月
一 二 三 四 五 六 日
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

近期文章

热门标签

新人福利，免费薅羊毛

现在位置:    首页 ＞ 前端 ＞ 正文
共享办公室出租
css实现div框阴影
 2012-01-15 22:10 前端 评论(1) 阅读(4,375)

方法一：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <HTML>
  4.  
  5. <HEAD>
  6.  
  7. <TITLE> azhong.com </TITLE>
  8.  
  9. <META NAME="Generator" CONTENT="EditPlus">
  10.  
  11. <META NAME="Author" CONTENT="">
  12.  
  13. <META NAME="Keywords" CONTENT="">
  14.  
  15. <META NAME="Description" CONTENT="">
  16.  
  17. <style>
  18.  
  19. #shadow{
  20.  
  21. position: relative;
  22.  
  23. left: 3px;
  24.  
  25. top: 3px;
  26.  
  27. margin-right: 3px;
  28.  
  29. margin-bottom: 3px;
  30.  
  31. }
  32.  
  33.  
  34.  
  35. #shadow .shadow2,
  36.  
  37. #shadow .shadow3,
  38.  
  39. #shadow .content {
  40.  
  41. position: relative;
  42.  
  43. left: -1px;
  44.  
  45. top: -1px;
  46.  
  47. }
  48.  
  49. #shadow .shadow1 {
  50.  
  51. background: #F1F0F1;
  52.  
  53. }
  54.  
  55. #shadow .shadow2 {
  56.  
  57. background: #DBDADB;
  58.  
  59. }
  60.  
  61. #shadow .shadow3 {
  62.  
  63. background: #B8B6B8;
  64.  
  65. }
  66.  
  67. #shadow .content {
  68.  
  69. background: #ffffff;
  70.  
  71. border: 1px solid #848284;
  72.  
  73. padding: 12px;
  74.  
  75. }
  76.  
  77. </style>
  78.  
  79. </HEAD>
  80.  
  81.  
  82.  
  83. <BODY>
  84.  
  85.  
  86.  
  87.  
  88.  
  89. XHTML部分：
  90.  
  91. <div id="shadow">
  92.  
  93. <div class="shadow1">
  94.  
  95. <div class="shadow2">
  96.  
  97. <div class="shadow3">
  98.  
  99. <div class="content">
  100.  
  101. 中华人民共和国
  102.  
  103. </div>
  104.  
  105. </div>
  106.  
  107. </div>
  108.  
  109. </div>
  110.  
  111. </div>
  112.  
  113. </BODY>
  114.  
  115. </HTML>
效果图：
      
方法二：
  1. css代码：
  2. <style type="text/css">
  3. .mydiv{
  4. width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;
  5. filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
  6. -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
  7. -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
  8. box-shadow:2px 2px 10px #909090;/*opera或ie9*/
  9. }
  10. </style>
  11.  
  12. for ie:
  13. direction 阴影角度 0°为从下往上 顺时针方向
  14. strength 阴影段长度
  15.  
  16.  
  17. -moz-box-shadow: 2px 2px 10px #909090;
  18. -webkit-box-shadow: 2px 2px 10px #909090;
  19. box-shadow:2px 2px 10px #909090;
  20.  
  21. 第一个参数是x轴阴影段长度
  22. 第二个参数是y轴阴影段长度
  23. 第三个参数是往四周阴影段长度
  24. 第四个参数是阴影段颜色
  25.  
  26. div代码：
  27. <div class="mydiv">
  28.    数据库之家
  29. </div>
效果图：
      
如果你有更好办法一定要告诉我哦？

============ 欢迎各位老板打赏~ ===========

关键字:
【上篇】
【下篇】

与本文相关的文章

该日志由 Bruce 于2012年01月15日发表在前端分类下

本文版权归Bruce's Blog所有，转载引用请完整注明以下信息：
本文作者：Bruce
本文地址：css实现div框阴影 | Bruce's Blog

css实现div框阴影：目前有1 条留言

  1. 中国培训网 : 2012年01月16日下午 11:40 回复

    快过年了，博主还有时间更新文章…我的网站都好长时间没有管理了。

发表评论

留言无头像?