位置:电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS3基础样式
CSS3 高级样式
当前阅读教程:CSS3教程 > box-shadow 属性
阅读(22555525)      收藏       赞(5685)      分享
上一篇: border-radius 属性 下一篇: CSS3 背景

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

image.png

属性定义及使用说明

box-shadow属性可以设置一个或多个下拉阴影的框。

默认值:

none

继承:

no

版本:

CSS3

JavaScript 语法:

object.style.boxShadow="10px   10px 5px #888888"

语法

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

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0

说明

h-shadow

必需的。水平阴影的位置。允许负值

v-shadow

必需的。垂直阴影的位置。允许负值

blur

可选。模糊距离

spread

可选。阴影的大小

color

可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset

可选。从外层的阴影(开始时)改变阴影内侧阴影

实例

代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow 属性</title>
<!--定义内部样式-->
     <style>
             div
             {
                      width: 300px;/*宽度*/
                      height: 100px;/*高度*/
                      background-color: yellow;/*背景颜色*/
                      box-shadow: 5px 5px 5px gray;/*阴影*/
             }
     </style>
    
</head>
<body>
   
     <div>
             box-shadow 属性
     </div>  
    
</body>
</html>
效果图

小白教程网www.2d5.net

image.png



上一篇: border-radius 属性 下一篇: CSS3 背景
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)