HTML | DOM 样式 boxShadow 属性

简介

在 HTML 和 DOM 编程中，boxShadow 属性用于为元素添加一个或多个阴影效果。这个属性通常用于美化页面元素，创建立体效果或者突出显示某些元素。

语法

boxShadow 属性使用以下语法：

element.style.boxShadow = "h-shadow v-shadow blur spread color inset";

参数说明：

• h-shadow：表示水平阴影的位置。在这里，我们可以使用负值表示阴影位于元素左边，正值表示阴影位于元素右边。
• v-shadow：表示垂直阴影的位置。在这里，我们可以使用负值表示阴影位于元素上方，正值表示阴影位于元素下方。
• blur：表示阴影的模糊半径。可以使用0来创建一个清晰的阴影，也可以使用较大的值来创建模糊效果。
• spread：表示阴影的尺寸。可以使用负值来缩小阴影大小，正值来扩大阴影大小。
• color：表示阴影的颜色。可以使用颜色名称、十六进制值或 RGB 值来指定颜色。
• inset（可选）：表示阴影是否为内阴影。如果设置为 inset，则阴影将显示在元素内部。

示例

以下是一些使用 boxShadow 属性的示例：

// 在 JavaScript 中为元素设置 boxShadow 属性
document.getElementById("myElement").style.boxShadow = "10px 10px 5px #888888";

// 在 HTML 中为元素设置 boxShadow 属性
<div style="box-shadow: 10px 10px 5px #888888;"></div>

以上示例中，元素将获得一个水平和垂直偏移为10像素的阴影，阴影的颜色为 #888888，模糊半径为5像素。

注意事项

• boxShadow 属性需要浏览器支持，不支持的浏览器将不显示阴影效果。
• 不同浏览器对 boxShadow 属性可能会有一些差异，需要在不同浏览器中进行测试和调整。

参考链接

• MDN Web 文档：boxShadow 属性