CSS 参考手册
CSS 参考手册
  1. CSS 参考手册
  2. CSS 选择器
  3. CSS 语音参考
  4. CSS Web安全字体
  5. CSS 动画
  6. CSS 单位
  7. CSS 颜色
  8. CSS 合法颜色值
  9. CSS 颜色名称
  10. CSS 颜色十六进制值
  11. CSS 浏览器支持
  12. CSS属性
    1. align-content 属性
    2. align-items 属性
    3. align-self 属性
    4. all 属性
    5. animation 属性
    6. animation-delay 属性
    7. animation-direction 属性
    8. animation-duration 属性
    9. animation-fill-mode 属性
    10. animation-iteration-count 属性
    11. animation-name 属性
    12. animation-play-state 属性
    13. animation-timing-function 属性
    14. appearance 属性
    15. backface-visibility 属性
    16. background 属性
    17. background-attachment 属性
    18. background-blend-mode 属性
    19. background-clip 属性
    20. background-color 属性
    21. background-image 属性
    22. background-origin 属性
    23. background-position 属性
    24. background-repeat 属性
    25. background-size 属性
    26. border 属性
    27. border-bottom 属性
    28. border-bottom-color 属性
    29. border-bottom-left-radius 属性
    30. border-bottom-right-radius 属性
    31. border-bottom-style 属性
    32. border-bottom-width 属性
    33. border-collapse 属性
    34. border-color 属性
    35. border-image 属性
    36. border-image-outset 属性
    37. border-image-repeat 属性
    38. border-image-source 属性
    39. border-image-width 属性
    40. Border-left 属性
    41. border-left-color 属性
    42. border-left-style 属性
    43. border-left-width 属性
    44. border-image-slice 属性
    45. border-radius 属性
    46. border-right 属性
    47. border-right-color 属性
    48. border-right-style 属性
    49. border-right-width 属性
    50. border-spacing 属性
    51. border-style 属性
    52. border-top 属性
    53. border-top-color 属性
    54. border-top-left-radius 属性
    55. border-top-right-radius 属性
    56. border-top-style 属性
    57. border-top-width 属性
    58. border-width 属性
    59. bottom 属性
    60. box-align 属性
    61. box-direction 属性
    62. box-flex 属性
    63. box-flex-group 属性
    64. box-lines 属性
    65. box-ordinal-group 属性
    66. box-orient 属性
    67. box-pack 属性
    68. box-shadow 属性
    69. box-sizing 属性
    70. caption-side 属性
    71. clear 属性
    72. clip 属性
    73. color 属性
    74. column-count 属性
    75. column-fill 属性
    76. column-gap 属性
    77. column-rule 属性
    78. column-rule-color 属性
    79. column-rule-style 属性
    80. column-rule-width 属性
    81. column-span 属性
    82. column-width 属性
    83. columns 属性
    84. content 属性
    85. counter-increment 属性
    86. counter-reset 属性
    87. cursor 属性
    88. direction 属性
    89. display 属性
    90. Empty-cells 属性
    91. filter(滤镜) 属性
    92. flex 属性
    93. flex-basis 属性
    94. flex-direction 属性
    95. flex-flow 属性
    96. flex-grow 属性
    97. flex-shrink 属性
    98. flex-wrap 属性
    99. float 属性
    100. font 属性
    101. @font-face 规则
    102. font-family 属性
    103. font-size 属性
    104. font-size-adjust 属性
    105. font-stretch 属性
    106. font-style 属性
    107. font-variant 属性
    108. font-weight 属性
    109. grid-columns 属性
    110. grid-rows 属性
    111. hanging-punctuation 属性
    112. height 属性
    113. icon 属性
    114. justify-content 属性
    115. @keyframes 规则
    116. left 属性
    117. letter-spacing 属性
    118. line-height 属性
    119. list-style 属性
    120. list-style-image 属性
    121. list-style-position 属性
    122. list-style-type 属性
    123. margin 属性
    124. margin-bottom 属性
    125. margin-left 属性
    126. margin-right 属性
    127. margin-top 属性
    128. max-height 属性
    129. max-width 属性
    130. @media查询
    131. min-height 属性
    132. min-width 属性
    133. nav-down 属性
    134. nav-index 属性
    135. nav-left 属性
    136. nav-right 属性
    137. nav-up 属性
    138. opacity 属性
    139. order 属性
    140. outline 属性
    141. outline-color 属性
    142. outline-offset 属性
    143. outline-style 属性
    144. Outline-width 属性
    145. overflow 属性
    146. overflow-x 属性
    147. overflow-y 属性
    148. padding 属性
    149. Padding-bottom 属性
    150. padding-left 属性
    151. padding-right 属性
    152. padding-top 属性
    153. Page-break-after 属性
    154. page-break-before 属性
    155. page-break-inside 属性
    156. perspective 属性
    157. perspective-origin 属性
    158. position 属性
    159. punctuation-trim 属性
    160. quotes 属性
    161. resize 属性
    162. right 属性
    163. rotation 属性
    164. tab-size 属性
    165. table-layout 属性
    166. target 属性
    167. target-name 属性
    168. target-new 属性
    169. target-position 属性
    170. text-align 属性
    171. text-align-last 属性
    172. text-decoration 属性
    173. text-decoration-color 属性
    174. text-decoration-line 属性
    175. text-decoration-style 属性
    176. text-indent 属性
    177. text-justify 属性
    178. text-outline 属性
    179. text-overflow 属性
    180. text-shadow 属性
    181. text-transform 属性
    182. text-wrap 属性
    183. top 属性
    184. transform 属性
    185. transform-origin 属性
    186. transform-style 属性
    187. transition 属性
    188. transition-delay 属性
    189. transition-duration 属性
    190. transition-property 属性
    191. transition-timing-function 属性
    192. unicode-bidi 属性
    193. vertical-align 属性
    194. visibility 属性
    195. width 属性
    196. white-space 属性
    197. border-image-width 属性
    198. word-break 属性
    199. word-spacing 属性
    200. word-wrap 属性
    201. z-index 属性
阅读(37k) 书签 赞(4) 我要纠错

CSS3 box-shadow 属性

2022-06-02 15:24 更新

CSS 参考手册

实例

向 div 元素添加 box-shadow：

div
{
box-shadow: 10px 10px 5px #888888;
}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
border-image 10.0 -webkit- 9.0.0 4.0 (2.0)[3]
3.5(1.9.1)
-moz		 5.1[1]
3.0
-webkit		 10.5[1]
-o-

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"

语法

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) 改为内部阴影。 测试

亲自试一试 - 实例

扔到桌子上面的图片
本例演示如何创建“Ballade”图片，并旋转图片。

相关页面

CSS3 教程：CSS3 边框

CSS 参考手册

以上内容是否对您有帮助：
← CSS3 box-pack 属性
CSS3 box-sizing 属性 →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号