HTML DOM 样式 boxShadow 属性

htmlweb developmentfront end technology更新于 2024/3/11 0:44:17

HTML DOM box-shadow 属性用于获取或设置元素框架内或周围的阴影。

以下是语法 −

设置 boxShadow 属性 −

box-shadow: none|h-offset|v-offset|blur|spread|color|inset|initial|inherit;

属性值解释如下 −

值	描述
none	这是默认值，不显示阴影。
h-offset	这指定了阴影与水平方向的距离偏移量。这是一个必需值，正值表示阴影位于框的右侧，负值表示阴影位于框的左侧。
v-offset	这指定了阴影与垂直偏移的距离。这是一个必需值，正值表示阴影位于框的底部，负值表示阴影位于框的顶部。
blur	用于指定模糊半径。
spread	用于指定扩展半径。
color	用于指定阴影颜色。
inset	这会使元素的阴影从外部移到内部。
initial	用于将此属性设置为初始值。
inherit	继承父级属性值

我们来看一个 boxShadow 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1 {
      height: 100px;
      width: 100px;
      box-shadow: 10px 10px 3px orange;
   }
</style>
<script>
   function changeBoxShadow(){
      document.getElementById("DIV1").style.boxShadow="1px 10px 10px 10px green";
      document.getElementById("Sample").innerHTML="The box shadow is changed now ";
   }
</script>
</head>
<body>
   <div id="DIV1">This is a sample div</div>
   <p>Change the above div border width by clicking the below button</p>
   <button onclick="changeBoxShadow()">Change Box Shadow</button>
   <p id="Sample"></p>
</body>
</html>