如何使用CSS建立漸層陰影？
- 王林轉載
- 2023-08-27 23:41:061238瀏覽
隨著網路的不斷發展，製作漂亮的 UI 是提高客戶在網站上的參與度的最重要的工作之一。改善前端外觀的方法之一是在 CSS 中應用漸層陰影。應用漸變陰影的兩種最重要的方法是線性漸變和徑向漸變。
漸層陰影可用於吸引使用者對特定訊息的注意力，套用懸停或焦點效果，或為網站提供 Web3 外觀和感覺。在本教程中，我們將透過實際範例來分析兩種漸變陰影。
我們將利用兩個重要的CSS概念來獲得效果，一個是filter屬性，另一個是::after偽類。偽類將用於建立假背景，而過濾器屬性將用於對周圍背景套用模糊效果。
方法一：線性漸層陰影
在此範例中，我們將了解如何在卡片上套用線性漸層陰影效果。
文法
.classname::after{
background: linear-gradient(direction, color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
其中，classname 是指指派給給定標籤的類，direction 屬性表示顏色的線性排列應沿哪個方向排列。這可以以“deg”形式提供，也可以使用預先設計的字串（例如“to right”）。
演算法
第一步：建立網站的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);
.......
}
演算法
第一步：建立網站的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 的值來增加或減少漸變效果所涵蓋的區域。負值越大，漸變就越突出，而模糊值則使效果在兩側更加分散。
以上是如何使用CSS建立漸層陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！