資料結構
網路
關係資料庫管理系統(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+
廣告