小白教程
所有教程
关于
Search
172.69.58.143
172.69.58.143
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr box shadow”的源代码
本页内容
上一节:
Css3_pr_border_top_right_radius
下一节:
Css3_pr_overflow_x
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:box-shadow}}[[Category:css reference|83]] = CSS3 box-shadow 属性 = 向 div 元素添加阴影: <sample title="" desc="" lang="html" hererun="1"> div { box-shadow: 10px 10px 5px #888888; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html> </run> 在本页底部查看更多实例。 == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | box-shadow | 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- |} == 属性定义及使用说明 == box-shadow属性可以设置一个或多个下拉阴影的框。 {| class="table table-striped table-hover" | 默认值: | none |- | 继承: | no |- | 版本: | CSS3 |- | JavaScript 语法: | object.style.boxShadow="10px 10px 5px #888888" |} == 语法 == <pre> box-shadow: h-shadow v-shadow blur spread color inset;</pre> '''注意:'''boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。 {| class="table table-striped table-hover" ! 值 ! 说明 |- | h-shadow | 必需的。水平阴影的位置。允许负值 |- | v-shadow | 必需的。垂直阴影的位置。允许负值 |- | blur | 可选。模糊距离 |- | spread | 可选。阴影的大小 |- | color | 可选。阴影的颜色。在[[css_colors_legal.aspx|CSS颜色值]]寻找颜色值的完整列表 |- | inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |} == 在线实例 == [[try.php?filename=trycss3_image_gallery|旋转图像]] 这个例子演示了如何创建"polaroid"的照片和旋转图片。 == 相关文章 == CSS3 教程: [[css3 borders|CSS3 边框]]
返回至“
Css3 pr box shadow
”。
上一节:
Css3_pr_border_top_right_radius
下一节:
Css3_pr_overflow_x