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 屬性提供了兩個陰影值，以逗號分隔。第一個值將在文本的右側繪制陰影，而第二個值將在文本的左側繪制陰影。

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

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

覽圖

首先查看預覽圖:

多彩方塊

原理

采用了 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博客

歡迎收藏該文章！

程序員web前端分享CSS3 邊框，通過 CSS3，您能夠創建圓角邊框，向矩形添加陰影，使用圖片來繪制邊框 - 并且不需使用設計軟件，比如 PhotoShop。

在本章中，您將學到以下邊框屬性：

border-radius

box-shadow

border-image

瀏覽器支持

Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。

Firefox、Chrome 以及 Safari 支持所有新的邊框屬性。

注釋：對于 border-image，Safari 5 以及更老的版本需要前綴 -webkit-。

Opera 支持 border-radius 和 box-shadow 屬性，但是對于 border-image 需要前綴 -o-。

CSS3 圓角邊框

在 CSS2 中添加圓角矩形需要技巧。我們必須為每個圓角使用不同的圖片。

在 CSS3 中，創建圓角是非常容易的。

在 CSS3 中，border-radius 屬性用于創建圓角：

實例

向 div 元素添加圓角：

1. div

2. {

3. border:2px solid;

4. border-radius:25px;

5. -moz-border-radius:25px; /* Old Firefox */

6. }

CSS3 邊框陰影

在 CSS3 中，box-shadow 用于向方框添加陰影：

實例

向 div 元素添加方框陰影：

1. div

2. {

3. box-shadow: 10px 10px 5px #888888;

4. }

CSS3 邊框圖片

通過 CSS3 的 border-image 屬性，您可以使用圖片來創建邊框：

用于創建上面的邊框的原始圖片：

實例

使用圖片創建圍繞 div 元素的邊框：

1. <font color="#000000" size="3">div

2. {

3. border-image:url(border.png) 30 30 round;

4. -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

5. -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */

6. -o-border-image:url(border.png) 30 30 round; /* Opera */

7. }</font>

新的邊框屬性

在線咨詢

上一篇：只用一個js文件，為你的網站加個黑暗模式
下一篇：Sketch 和 PS中的設計圖如何實現“自動切圖”？

您的項目需求

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

整合營銷服務商

CSS文本陰影

水平偏移

垂直偏移

模糊半徑

顏色

覽圖

原理

全部代碼

參考文章

您的項目需求