CSS3 box-shadow 属性

实例

向 div 元素添加 box-shadow：

  1. div
  2. {
  3. box-shadow: 10px 10px 5px #888888;
  4. }

页面底部有更多实例。

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxShadow="10px 10px 5px #888888"

语法

  1. box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

实例

  • 扔到桌子上面的图片

    本例演示如何创建“宝丽来”图片，并旋转图片。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. body
  6. {
  7. margin:30px;
  8. background-color:#E9E9E9;
  9. }
  11. div.polaroid
  12. {
  13. width:294px;
  14. padding:10px 10px 20px 10px;
  15. border:1px solid #BFBFBF;
  16. background-color:white;
  17. /* Add box-shadow */
  18. box-shadow:2px 2px 3px #aaaaaa;
  19. }
  21. div.rotate_left
  22. {
  23. float:left;
  24. -ms-transform:rotate(7deg); /* IE 9 */
  25. -moz-transform:rotate(7deg); /* Firefox */
  26. -webkit-transform:rotate(7deg); /* Safari and Chrome */
  27. -o-transform:rotate(7deg); /* Opera */
  28. transform:rotate(7deg);
  29. }
  31. div.rotate_right
  32. {
  33. float:left;
  34. -ms-transform:rotate(-8deg); /* IE 9 */
  35. -moz-transform:rotate(-8deg); /* Firefox */
  36. -webkit-transform:rotate(-8deg); /* Safari and Chrome */
  37. -o-transform:rotate(-8deg); /* Opera */
  38. transform:rotate(-8deg);
  39. }
  40. </style>
  41. </head>
  42. <body>
  44. <div class="polaroid rotate_left">
  45. <img src="/uploads/projects/cssref/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
  46. <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
  47. </div>
  49. <div class="polaroid rotate_right">
  50. <img src="/uploads/projects/cssref/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
  51. <p class="caption">2010年上海世博会，中国馆。</p>
  52. </div>
  55. </body>
  56. </html>

相关页面

CSS3 教程：CSS3 边框