資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS建立漸變陰影？
隨著網路的發展，製作精美的UI是提高網站使用者參與度的最重要工作之一。改進前端外觀和感覺的方法之一是在CSS中應用漸變陰影。應用漸變陰影最重要的兩種方法是線性漸變和徑向漸變。
漸變陰影可用於吸引使用者注意特定資訊、應用懸停或焦點效果，或為網站提供Web3外觀和感覺。在本教程中，我們將透過實踐示例分析這兩種漸變陰影。
我們將利用兩個重要的CSS概念來實現此效果，一個是`filter`屬性，另一個是`::after`偽類。偽類將用於建立虛假的背景，而`filter`屬性將用於對周圍背景應用模糊效果。
方法一：線性漸變陰影
在這個例子中，我們將瞭解如何在卡片上應用線性漸變陰影效果。
語法
.classname::after{
background: linear-gradient(direction, color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
其中，`classname`指的是分配給給定標籤的類名，`direction`屬性表示顏色線性排列的方向。這可以使用“deg”或使用預設字串（如“to right”）來提供。
演算法
步驟1：建立網站的HTML文件骨架，併為需要漸變效果的標籤分配一個類名。
步驟2：使用與分配給標籤相同的類名的`::after`偽類。
步驟3：使用`linear-gradient()` CSS函式，使用所需的漸變顏色填充偽類的背景。
步驟4：為了確保偽類永遠不會覆蓋原始類，請在偽類中新增`z-index`屬性，其值低於分配給原始類的值。
步驟5：向偽類新增一個小`inset`屬性，以便原始類不會完全覆蓋背景。
步驟6：最後，要應用漸變陰影效果，請對偽元件應用模糊效果。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient Shadow</title>
</head>
<body>
<div class="gradient">
<h1>Welcome to Tutorials Point</h1>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
.gradient{
margin-top: 20px;
margin-left: 5%;
width: 90%;
position: relative;
border-radius: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 10px;
padding-left: 10px;
background-color: black;
}
h1{
color: white;
text-align: center;
}
.gradient::after{
content: "";
position: absolute;
z-index: -100;
background: linear-gradient(to right, blue, cyan,lime, green, yellow, orange, red);
inset: -0.5rem;
filter: blur(25px);
}
</style>
</body>
</html>
方法二：徑向漸變陰影
在這個例子中，我們將瞭解如何在同一卡片效果上應用徑向漸變陰影效果，並觀察變化。
語法
.classname::after{
background: radial-gradient(color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
演算法
步驟1：建立網站的HTML文件骨架，併為需要漸變效果的標籤分配一個類名。
步驟2：使用與分配給標籤相同的類名的`::after`偽類。
步驟3：使用`radial-gradient()` CSS函式，使用所需的漸變顏色填充偽類的背景。
步驟4：為了確保偽類永遠不會覆蓋原始類，請在偽類中新增`z-index`屬性，其值低於分配給原始類的值。
步驟5：向偽類新增一個小`inset`屬性，以便原始類不會完全覆蓋背景。
步驟6：最後，要應用漸變陰影效果，請對偽元件應用模糊效果。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradient Shadow</title>
</head>
<body>
<div class="gradient">
<h1>Welcome to Tutorials Point</h1>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
.gradient{
margin-top: 20px;
margin-left: 5%;
width: 90%;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: black;
}
h1{
color: white;
text-align: center;
}
.gradient::after{
content: "";
position: absolute;
z-index: -100;
background: radial-gradient(yellow, red, blue);
inset: -1rem;
filter: blur(10px);
}
</style>
</body>
</html>
結論
徑向漸變顏色起源於標籤的中心，從上面的例子可以看出，黃色完全被黑色背景覆蓋，而紅色的一些痕跡出現在卡片側面的中點。另一方面，線上性漸變中，沒有觀察到重疊，因為它根據提供的方向沿所有側邊均勻分佈所有顏色。
我們還可以調整`inset`和`blur`的值來增加或減少漸變效果所包含的區域。值越負，漸變越明顯；`blur`值使效果在側面更加分散。
911 次瀏覽
