HTML Style boxShadow属性; 设置或返回box阴影

使用boxShadow属性设置或返回box(块元素)阴影。

boxShadow属性对应着CSS文档中的 boxShadow属性。

boxShadow属性语法及技术细节
语法
设置值Object.style.boxShadow="none/h-shadow v-shadow blur spread color /inset/initial/inherit"
返回值Object.style.boxShadow
技术细节
默认值none
返回值字符,块元素的box-shadow属性
CSS版本css3
属性的值及其说明
说明
none 不显示阴影,默认值。
h-shadow 必须,横方向阴影的长度,允许使用负值
v-shadow 必须,垂直方向阴影的长度,允许使用负值
blur 任意,阴影扩散的范围
spread 任意,阴影延伸的距离
color 任意,阴影的颜色,默认值为黑色
注:Safari浏览器上该值为必须值,如果省略,不显示阴影
inset 指定该值时,阴影在box的内侧。
initial 保持原有属性的值。
inherit 继承母元素的设定。

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#myDIV {

position: absolute;

width: 100px;

height: 100px;

background-color: coral;

color: white;

}

</style>

</head>

<body>

<p>点击以下按钮,给DIV元素添加 boxShadow属性</p>

<button onclick="myFc()">按钮</button>

<div id="myDIV">

<h1>myDIV</h1>

</div>

<script>

function myFc() {

document.getElementById("myDIV").style.boxShadow = "10px 20px 30px lightblue";

}

</script>

</body>

</html>

不同浏览器的对应情况

属性
boxShadow 9.0 1.0 1.0 5.1 3.5

注:上表中的数字为开始支持该当属性的浏览器版本。

关联内容