数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
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+
广告