隨著網(wǎng)絡的不斷發(fā)展，制作漂亮的 UI 是提高客戶在網(wǎng)站上的參與度的最重要的工作之一。改善前端外觀的方法之一是在 CSS 中應用漸變陰影。應用漸變陰影的兩種最重要的方法是線性漸變和徑向漸變。
漸變陰影可用于吸引用戶對特定信息的注意力，應用懸?；蚪裹c效果，或為網(wǎng)站提供 Web3 外觀和感覺。以下我們將通過實際示例來分析兩種漸變陰影。
我們將利用兩個重要的CSS概念來獲得效果，一個是filter屬性，另一個是::after偽類。偽類將用于創(chuàng)建假背景，而過濾器屬性將用于對周圍背景應用模糊效果。
方法一：線性漸變陰影
在此示例中，我們將了解如何在卡片上應用線性漸變陰影效果。
語法
.classname::after{
background: linear-gradient(direction, color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}?
其中，classname 是指分配給給定標簽的類，direction 屬性表示顏色的線性排列應沿哪個方向排列。這可以以“deg”形式提供，也可以使用預先設計的字符串（例如“to right”）。
算法
第一步：創(chuàng)建網(wǎng)站的html文檔骨架，并為需要漸變效果的標簽指定類名。
第 2 步：使用 ::after 偽類，其類名與分配給標記的類名相同。
第 3 步：使用 Linear?gradient() CSS 函數(shù)用所需的漸變顏色填充偽類的背景。
第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);
.......
}?
算法
第一步：創(chuàng)建網(wǎng)站的html文檔骨架，并為需要漸變效果的標簽指定類名。
第 2 步：使用 ::after 偽類，其類名與分配給標記的類名相同。
第 3 步：使用 Radial?gradient() CSS 函數(shù)用所需的漸變顏色填充偽類的背景。
第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>?
總結(jié)
徑向漸變顏色源自標簽的中心，從上面的例子可以看出，黃色完全被黑色背景疊加，而在卡片側(cè)面的中點處發(fā)現(xiàn)了一些紅色的痕跡。另一方面，在線性漸變中，沒有觀察到疊加，因為它根據(jù)提供的方向沿所有邊均勻分布所有顏色。文章來源：http://www.zghlxwxcb.cn/news/detail-679490.html
我們還可以調(diào)整 inset 和 Blur 的值來增加或減少漸變效果所覆蓋的區(qū)域。負值越大，漸變就越突出，而模糊值則使效果在兩側(cè)更加分散。文章來源地址http://www.zghlxwxcb.cn/news/detail-679490.html
到了這里，關于如何使用CSS創(chuàng)建漸變陰影？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
