css 設置盒子陰影，陰影和背景圖保持一致

覽圖

首先查看預覽圖:

多彩方塊

原理

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

歡迎收藏該文章！

者 | chokcoco
來源 | https://juejin.im/post/5be1023951882516fd36a38e

最近一個新的項目，CSS-Inspiration，挖掘了其他很多有關 CSS 陰影的點子，是之前的文章沒有覆蓋到的新內容，而且有一些很有意思，遂打算再起一篇。不過之前小編也發布了幾篇關于CSS相關文章不妨一起來回顧回顧：

《手把手整理CSS3知識匯總【思維導圖】》

加一個簡單的陰影

讓我們為投影準備一個簡單的HTML元素：

然后添加CSS：

輸出結果是三個框，通過調用每個框的ID可以很容易地放置陰影。要添加陰影，讓我們將屬性box-shadow賦予框1：

我們提供三個參數。前兩個參數是offset-x和offset-y。兩者都確定投影的位置。相對于元素左上角的位置給出偏移量。偏移x處的正值表示將陰影向右引導，偏移y處的正值表示將陰影向下引導。

第三個參數是所需的陰影顏色。盡管這里我們使用elements <div>，但是屬性box-shadow可以應用于所有其他HTML元素。

賦予模糊半徑

如果想要陰影看起來更逼真，則可以使用blur-radius參數。此參數將設置我們如何給予陰影模糊效果。讓我們將其應用于方框2：

注意第三個參數，該值4px調整應用于投影的模糊半徑。

提供半徑差數

如果要調整陰影的大小，我們可以添加參數spread-radius以使陰影擴大或縮小。讓我們8px在框2中添加一個半徑擴展：

注意參數的順序。

合并多個陰影

我們甚至可以一次將多個陰影組合到一個元素中。讓框3應用藍色和綠色投影：

制作陰影

我們可以用參數制作一個向內的陰影inset。參數inset可以寫在屬性的開頭或結尾box-shadow。以下示例使用elements blockquote。

我們還可以添加一些模糊和散布以增強陰影：

使用properties box-shadow，我們可以為所創建的網頁提供陰影，從而可以提供良好的3D照明效果。

在線咨詢

上一篇：ssm137基于SSM框架的微博系統—源碼文檔
下一篇：HTML+CSS：css元素浮動詳解，使用浮動制作導航欄菜單

您的項目需求

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

整合營銷服務商

css 設置盒子陰影，陰影和背景圖保持一致

覽圖

原理