如何使用CSS建立漸層陰影？-css教學-PHP中文網

首頁

web前端

css教學

如何使用CSS建立漸層陰影？

王林

Aug 27, 2023 pm 11:41 PM

css陰影漸變

如何使用CSS建立漸層陰影？

隨著網路的不斷發展，製作漂亮的 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 id="Welcome-to-Tutorials-Point">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 id="Welcome-to-Tutorials-Point">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>