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