整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
首先查看預覽圖:
多彩方塊
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博客
歡迎收藏該文章！
讓我們為投影準備一個簡單的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照明效果。
享興趣，傳播快樂，增長見聞，留下美好！
親愛的您，這里是LearningYard新學苑。
今天小編為大家帶來話說前端18-盒子陰影以及新盒子屬性
，歡迎您的訪問。
Share interestsundefined spread happinessundefined increase knowledgeundefined and leave a good legacy!
Dear youundefined this is The LearningYard Academy.
Today Xiaobian brings you the knowledge sharing of Knowledge set | operations research backpack problem
welcome to your visit.
今天我們來講一講盒子陰影以及新盒子屬性。
首先如其名“陰影”，就像影子一樣顯示在我們的布局里頭。CSS3中新增了盒子陰影，我們可以使用box-shadow屬性為盒子添加陰影。文字陰影的屬性也是。box-shadow的 其中屬性為：
h-shadow：水平方向的陰影，可正可負
v-shadow：豎直方向的陰影，可正可負
Blur：模糊度
Spread：尺寸
Color：顏色
Inset：將陰影設置在內部。
Today, let's talk about box shadows and new box attributes.
First of all, as the name "shadow" shows up in our layout like a shadow. Box shadow has been added in CSS3. We can use the box-shadow property to add a shadow to the box. So is the attribute of the shadow. The attributes of box-shadow are:
H-shadow: horizontal shadow, which can be positive or negative.
V-shadow: vertical shadow, which can be positive or negative.
Blur: ambiguity
Spread: size
Color: color
Inset: Set the shadow inside.
通常為了方便，我們寫成簡寫如box-shadow：4px 4px 4px 4px.....這樣寫，其中最前面的4px為上面的尺寸，然后順時針填寫，順序不能亂（上右下左），其中要注意的是默認的是外陰影(outset),但是不可以寫這個單詞,否則導致陰影無效。盒子陰影不占用空間，不會影響其他盒子排列。
Usually, for convenience, we write it as a shorthand such as box-shadow：4px 4px 4px 4px 4px, and write it like this, in which the foremost 4px is the above size, and then fill it in clockwise, and the order can't be out of order (top right, bottom left). It should be noted that the default is outset shadow, but you can't write this word, otherwise the shadow will be invalid. Shadows do not occupy space and will not affect the arrangement of other boxes.
文字陰影：text-shadow，與盒子陰影一致，但是沒有尺寸和內部的設置。
CSS3盒子模型，CSS3中可以通過box-sizing來指定盒模型，有兩個屬性值，content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。
Text: text-shadow, consistent with box shadow, but without size and internal settings.
CSS3 box model. In CSS3, you can specify the box model by box-sizing. There are two attribute values, content-box and border-box, so that the way we calculate the box size has changed.
盒子計算方式分成兩種情況：
box-sizing：content-box(盒子大小) ：width+padding+border （以前默認盒子大小組成）
border-sizing：border-box 盒子大小為width（就是自己設置盒子的寬度大小不會撐大盒子）
在CSS3中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。border-radius屬性用于設置元素的外邊框圓角。如果將其設置成寬度一樣高就可以使盒子變成圓。也可以分開寫：分開寫 :
border-top-left-radius、
border-top-right-radius、
border-bottom-right-radius
border-bottom-left-radius
The box calculation method is divided into two cases:
Box-sizing: content-box: width+padding+border (previously composed of the default box size)
Border-sizing：border-box size of the border-box box is width (that is, setting the width of the box by yourself will not enlarge the box)
In CSS3, a new rounded border style has been added, so that our boxes can be rounded. The border-radius attribute is used to set the rounded corner of the outer border of an element. If it is set as high as the width, the box can be made into a circle. You can also write separately: write separately:
border-top-left-radius、
border-top-right-radius、
border-bottom-right-radius
border-bottom-left-radius
今天的分享就到這里了。如果您對今天的文章有什么獨特的想法，歡迎評論留言，讓我們相約明天，祝您今天過得開心快樂！
That's it for today's sharing. If you have any unique ideas for today's articleundefined please leave a commentundefined let us meet tomorrowundefined I wish you a happy day!
翻譯：Google翻譯
本文由LearningYard新學苑原創，部分圖片文字來自網絡，如有侵權請聯系。
文字&排版|李仕陽
審核|閆慶紅
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
