HTML - DOM样式对象boxShadow属性

HTML DOM 样式对象**boxShadow** 属性用于设置或获取元素框架周围或内部的阴影。

语法

设置 boxShadow 属性

object.style.boxShadow= "none | h-offset | v-offset | blur | spread | color | inset | initial | inherit";

获取 boxShadow 属性

object.style.boxShadow;

属性值

值	描述
none	这是默认值，不显示任何阴影。
h-offset	这是必需的属性值，用于指定水平阴影的位置。
v-offset	这是必需的属性值，用于指定垂直阴影的位置。
blur	这是一个可选值，用于指定盒阴影的模糊距离。
spread	这是一个可选值，用于指定扩展半径。
color	用于指定阴影的颜色。
inset	将阴影设置在元素内部。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示元素的 box-shadow 属性。

HTML DOM 样式对象“boxShadow”属性示例

以下示例说明了 boxShadow 属性的不同属性值。

向元素添加阴影

以下示例设置了阴影的**h-offset**、**v-offset** 和**color**。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object boxShadow Property
    </title>
    <style>
        #shadow {
            position: absolute;
            width: fit-content;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click to add box shadow</p>
    <button onclick="fun()">Add</button>
    <div id="shadow">
        <p>Welcome to Tutorials point</p>
    </div>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.boxShadow = "10px 20px aqua";
        }
    </script>
</body>
</html>

向阴影添加“blur”和“spread”

此示例向阴影添加了**blur** 和**spread**，其中 blur 为 40px，spread 为 30px。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object boxShadow Property
    </title>
    <style>
        #shadow {
            position: absolute;
            width: fit-content;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click to add box shadow</p>
    <button onclick="fun()">Add</button>
    <div id="shadow">
        <p>Welcome to Tutorials point</p>
    </div>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.boxShadow = "10px 20px 40px 30px aqua";
        }
    </script>
</body>
</html>

向阴影添加“inset”

以下示例向阴影添加了**inset**。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object boxShadow Property
    </title>
    <style>
        #shadow {
            position: absolute;
            width: fit-content;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click to add box shadow</p>
    <button onclick="fun()">Add</button>
    <div id="shadow">
        <p>Welcome to Tutorials point</p>
    </div>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.boxShadow = "10px 20px aqua inset";
        }
    </script>
</body>
</html>

支持的浏览器

属性
boxShadow	是 10	是 12	是 4	是 5.1	是 10.5

html_dom_style_object_reference.htm

打印页面