CSS文本陰影

天我發了幾篇關于CSS文字效果的文章，接下來給大家介紹一下如何使用CSS完成文本陰影效果。

該 text-shadow 屬性可用于為您的文本提供美麗的陰影效果。使用此屬性，可以為HTML元素的文本提供不同類型的陰影效果。

您可以為此屬性的四個參數賦予值，如下所示。

CSS

text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

值

這些參數定義如下。

水平偏移（必需）： 這是陰影與文本的水平距離。正水平偏移將陰影置于文本的右側，而負水平偏移將陰影置于文本的左側。
垂直偏移（必需）： 這是文本上方或下方陰影的垂直距離。正垂直偏移將陰影置于文本的底部，而負垂直偏移將陰影置于文本的頂部。
模糊半徑（可選）： 給予模糊半徑使陰影模糊。較高的模糊半徑值將使陰影更加模糊和擴展，從而使其更大更輕。另一方面，較小的模糊半徑值將導致更清晰，更亮和更少擴展的陰影。不允許使用負值。
color（可選）： 指定陰影的顏色。

讓我們通過一個例子來理解這一點。以下代碼將更改文本的字體大小和顏色。

HTML

<p>Text Shadow</p>

CSS

p {
 font-family: 'Muli', sans-serif;
 font-size: 47px;
 font-weight: 900;
 color: #CFC547;
}

現在，考慮到上述每個參數的影響，讓我們為這個文本畫一個陰影。

水平偏移

如果只想在文本的左側或右側使用陰影，則給出垂直偏移0的值。

要將陰影置于文本的右側，請給出正的水平偏移值。

CSS

.text {
	text-shadow: 3px 0 rgba(81,67,21,0.8);
}

負值會將陰影置于框的左側。

CSS

.text {
	text-shadow: -3px 0 rgba(81,67,21,0.8);
}

在上面的代碼中， rgba（81,67,21,0.8） 是陰影的顏色。如果沒有給出陰影顏色，則文本陰影的顏色將與文本的顏色相同。

垂直偏移

與上面的情況相同，如果您希望陰影僅位于文本的頂部或底部，請給出0水平偏移。

正垂直偏移值將陰影置于文本的底部。

CSS

.text {
	text-shadow: 0 4px rgba(81,67,21,0.8);
}

負值會將陰影置于文本的上方。

CSS

.text {
	text-shadow: 0 -4px rgba(81,67,21,0.8);
}

如果你想要一個右下角的陰影，那么給出水平偏移和垂直偏移都是正的。

CSS

.text {
	text-shadow: 3px 4px rgba(81,67,21,0.8);
}

模糊半徑

模糊使陰影看起來真實。要為陰影提供模糊效果，請給它一些正方形模糊半徑。

CSS

.text {
	text-shadow: 3px 4px 7px rgba(81,67,21,0.8);
}

顏色

您可以通過提供任何顏色名稱或顏色值（如rgba或hsla）為陰影指定顏色。如果將不透明度設置為小于1的值（如上面的情況，不透明度設置為0.8），它會為陰影提供漂亮且更自然的外觀。

給多個陰影

您還可以為某些文本提供多個陰影，以提供不同的陰影效果。這些值以逗號分隔給 text-shadow屬性。

例如，請考慮以下代碼。

CSS

.text {
 text-shadow: 3px 0px 7px rgba(81,67,21,0.8), -3px 0px 7px rgba(81,67,21,0.8);
}

這里，為text-shadow 屬性提供了兩個陰影值，以逗號分隔。第一個值將在文本的右側繪制陰影，而第二個值將在文本的左側繪制陰影。

考慮一些給出多個陰影的例子。

整理不易，請大家多多關注支持我，謝謝！

HTML5 中，我們除了上一節講過的可以對圖形設置平移、旋轉、縮放，還可以給圖形添加陰影效果。添加陰影的時候只需要利用圖形上下文對象的幾個關于陰影繪制的屬性就可以實現啦。

圖形陰影繪制的屬性

shadowOffsetX 屬性和 shadowOffsetY 屬性分別用于設置陰影在 X 軸和 Y 軸的延伸距離，屬性值為正值表示向下或向右延伸，負值表示向上或向左延伸。

shadowBlur 屬性用于設置陰影的模糊度，當我們不希望圖形的陰影太清晰時，可以使用這個屬性。屬性值為必須為正值，否則無效喲，一般設定在 0到10 之間。

shadowColor 屬性值用于設置陰影的顏色，屬性值可以為任意標準的 CSS 顏色值，默認顏色為黑色。

給圖形繪制陰影

例如給一個粉色的矩形繪制陰影。

示例：

繪制向右偏移 10 像素的陰影：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學習(9xkd.com)</title>
        </head>
        <body>
            <canvas id="mycanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
            <script>
                var can=document.getElementById("mycanvas");
                var ctx=can.getContext("2d");
                ctx.shadowOffsetX=10;
                ctx.shadowBlur=10;
                ctx.shadowColor="#000";
                ctx.fillStyle="pink";  // 填充顏色
                ctx.fillRect(50, 50, 150, 70);
            </script>
        </body>
    </html>

在瀏覽器中的演示效果：

可以看到上圖中，陰影的位置向右偏移，如果想要陰影向左偏移，可以將shadowOffsetX 的值設置為負數。

示例：

如果要繪制向上偏移 20 像素的陰影，則不需要設置 shadowOffsetX，而是設置 shadowOffsetY 屬性，正值為向下偏移，負值為向上偏移：

var can=document.getElementById("mycanvas");
var ctx=can.getContext("2d");
ctx.shadowOffsetY=-20;
ctx.shadowBlur=10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle="pink";  // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

可以看到這張截圖中，矩形的陰影顏色要比上面示例中淡一點。這是因為我們在給陰影設置顏色時，指定了一個透明度，用到了 rgba() 函數，函數中第四個參數用于設置透明度，值為 0~1 之間的小數，0表示完全透明，1表示不透明。

示例：

給四個邊設置陰影：

var can=document.getElementById("mycanvas");
var ctx=can.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle="pink";   // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

在實際應用中，其實我們會經常用到陰影，例如給導航欄添加陰影、給按鈕添加陰影、給圖片添加陰影等，這樣看上去就會更立體一些，增加層次感。

了解更多可查看鏈接：https://www.9xkd.com/

覽圖

首先查看預覽圖:

多彩方塊

原理

采用了 background 屬性 background: inherit;

inherit 關鍵字使得元素獲取其父元素的計算值。它可以應用于任何 CSS 屬性，包括 CSS 簡寫 all。對于繼承屬性，inherit 關鍵字只是增強了屬性的默認行為，通常只在覆蓋原有的值的時候使用。繼承始終來自文檔樹中的父元素，即使父元素不是包含塊。

線性漸變 linear-gradient

線性漸變由一個軸 (梯度線) 定義，其上的每個點具有兩種或多種的顏色，且軸上的每個點都具有獨立的顏色。為了構建出平滑的漸變，linear-gradient() 函數構建一系列垂直于漸變線的著色線，每一條著色線的顏色則取決于與之垂直相交的漸變線上的色點。

用法：

// 漸變軸從左上角出發并且呈 45 度。
background: linear-gradient(45deg, red, blue);

偽元素 ::after

CSS偽元素::after用來創建一個偽元素，作為已選中元素的最后一個子元素。通常會配合content屬性來為該元素添加裝飾內容。這個虛擬元素默認是行內元素。

.content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 獲取其父元素的計算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
}

濾鏡 filter

在該程序中調用了2個函數： blur(20px) brightness(80%);

blur()：將高斯模糊應用于輸入圖像。

brightness()：將線性乘法器應用于輸入圖像，以調整其亮度。值為 0% 將創建全黑圖像；值為 100% 會使輸入保持不變，其他值是該效果的線性乘數。如果值大于 100% 將使圖像更加明亮。

至于代碼中還有其他知識點，也就是 margin 、position 等基礎內容了。

全部代碼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陰影和背景一致</title>
    <style>
        .content-item {
            position: relative;
            width: 260px;
            height: 260px;
            border-radius: 10px;
            /* background: linear-gradient(90deg, #e66465, #9198e5); */
            background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
                linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
                linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
            margin: 100px auto;
        }

        .content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 獲取其父元素的計算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="content-item"></div>
    </div>
</body>

</html>

參考文章

css 設置盒子陰影，陰影和背景圖保持一致_css filter 陰影色和背景色一致_隨憶~的博客-CSDN博客

歡迎收藏該文章！

在線咨詢

上一篇：把開發環境搭上，開始碼代碼
下一篇：聊一聊CSS文本兩端對齊

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS文本陰影

水平偏移

垂直偏移

模糊半徑

顏色

圖形陰影繪制的屬性

給圖形繪制陰影

覽圖

原理

全部代碼

參考文章

您的項目需求