整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
首先查看預覽圖:
多彩方塊
inherit 關鍵字使得元素獲取其父元素的計算值。它可以應用于任何 CSS 屬性，包括 CSS 簡寫 all。對于繼承屬性，inherit 關鍵字只是增強了屬性的默認行為，通常只在覆蓋原有的值的時候使用。繼承始終來自文檔樹中的父元素，即使父元素不是包含塊。
線性漸變由一個軸 (梯度線) 定義，其上的每個點具有兩種或多種的顏色，且軸上的每個點都具有獨立的顏色。為了構建出平滑的漸變，linear-gradient() 函數構建一系列垂直于漸變線的著色線，每一條著色線的顏色則取決于與之垂直相交的漸變線上的色點。
用法：
// 漸變軸從左上角出發并且呈 45 度。
background: linear-gradient(45deg, red, blue);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;
}在該程序中調用了2個函數： blur(20px) brightness(80%);
至于代碼中還有其他知識點，也就是 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照明效果。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
