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

列印頁面