数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 为盒子添加一个或多个投影阴影？
要使用 JavaScript 为盒子添加一个或多个投影阴影，您可以使用 box-shadow 样式属性。您可以通过在 box-shadow 属性中传递这些属性的值来指定阴影的偏移量、模糊半径、扩展半径和颜色。
语法
以下是使用 JavaScript 为盒子添加一个或多个投影阴影的语法：
box.style.boxShadow = "offset-x offset-y blur-radius spread-radius color";
这里的 JavaScript 中的 box.style.boxShadow 属性允许您为一个盒子元素添加一个或多个投影阴影。它接受以下参数
offset-x − 这是阴影的水平偏移量。正值会在盒子的右侧创建阴影，而负值会在左侧创建阴影。
offset-y − 这是阴影的垂直偏移量。正值会在盒子的底部创建阴影，而负值会在顶部创建阴影。
blur-radius − 这是应用于阴影的模糊量。较高的值会产生更模糊的阴影。
spread-radius − 这是阴影增长或缩小的量。正值会导致阴影变大，而负值会导致阴影缩小。
color − 这是阴影的颜色。它可以指定为颜色名称、十六进制代码或 RGB 值。
示例：添加基本投影阴影
在下面的示例中，我们添加了一个基本的黄色投影阴影。我们将 6px、12px 和黄色作为 offset-x、offset-y 和 color 参数传递给 boxShadow 属性。
<html>
<head>
<style>
#box {
background-color: #333;
width: 200px;
color: white;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h2> Adding one or more drop shadow to the box using JavaScript </h2>
<p> Click on the button to add drop shadow </p>
<p></p>
<div id="box">Box</div>
<br><br>
<button type="button" onclick="displayBlue()">Add Drop Shadow</button>
<script>
const box = document.getElementById("box");
function displayBlue() {
box.style.boxShadow = "6px 12px yellow";
}
</script>
</body>
</html>
示例：添加模糊半径
在下面的示例中，我们通过在颜色之前传递一个额外的参数来添加盒子的模糊半径。
<html>
<head>
<style>
#box {
background-color: #333;
width: 200px;
color: white;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h2> Adding one or more drop shadow to the box using JavaScript </h2>
<p> Click on the buttons to add drop shadow ans shadow blur </p>
<p></p>
<div id="box">Box</div>
<br><br>
<button type="button" onclick="displayBlue()">Add Drop Shadow</button>
<button type="button" onclick="addShadowBlur()">Add Drop Shadow Blur</button>
<script>
const box = document.getElementById("box");
function displayBlue() {
box.style.boxShadow = "6px 12px yellow";
}
function addShadowBlur() {
box.style.boxShadow = "6px 12px 6px yellow";
}
</script>
</body>
</html>
示例：添加扩展半径
我们还可以添加扩展半径来控制阴影通过在颜色之前传递一个额外的参数来控制阴影增长的多少。
<html>
<head>
<style>
#box {
background-color: #333;
width: 200px;
color: white;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h2> Adding one or more drop shadow to the box using JavaScript </h2>
<p> Click on the buttons to add drop shadow , shadow blur and Shadow Blur Spread </p>
<p></p>
<div id="box">Box</div>
<br><br>
<button type="button" onclick="addShadow()">Add Drop Shadow</button>
<button type="button" onclick="addShadowBlur()">Add Drop Shadow Blur</button>
<button type="button" onclick="addShadowBlurSpread()">Add Drop Shadow Blur Spread</button>
<script>
const box = document.getElementById("box");
function addShadow() {
box.style.boxShadow = "6px 12px yellow";
}
function addShadowBlur() {
box.style.boxShadow = "6px 12px 6px yellow";
}
function addShadowBlurSpread() {
box.style.boxShadow = "6px 12px 6px 4px yellow";
}
</script>
</body>
</html>
总之，要使用 JavaScript 为盒子添加一个或多个投影阴影，您可以使用 box-shadow 样式属性。您可以通过在 box-shadow 属性中传递这些属性的值来指定阴影的偏移量、模糊半径、扩展半径和颜色。
更新于： 2023年1月6日
1K+ 次查看
广告