一、css3背景切割： background-clip:border-box|padding-box|content-box;
作用： 用來設定背景的可見區域
a) border-box 預設值，背景在邊框及邊框以內的區域可見
b) padding-box 背景在padding及padding以內的區域可見
c) content-box 背景在content區域可見
二、背景原點: background-origin:padding-box|border-box|content-box;
作用：background-origin用來設定背景影象的定位區域
a) padding-box 預設值，背景原點在padding區域
b) border-box 背景原點在border區域
c) content-box 背景原點在content區域
三、背景切割&背景原點：
background-clip和background-origin結合使用
background-origin:content-box;
background-clip:padding-box;
背景原點在content區域，背景在padding以內的區域可見
四、背景圖尺寸：background-size:值;
1) length
可以設定背景圖的寬度和高度，第乙個值代表寬度，第二個值代表高度，如果省略第二個值，預設為auto，等比例縮放
eg: background-size:500px 300px; (背景圖有可能會發生變形)
background-size:500px; (背景圖等比例縮放)
2) 百分比
可以以父元素容器的百分比來設定背景圖的尺寸，第乙個值代表寬度，第二個值代表高度，如果省略第二個值，預設為auto
eg: background-size:100% 100%; (背景圖有可能會發生變形)
3) cover
把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。背景影象有可能超出容器,背景影象不會發生變形
4) contain
把影象擴充套件至最大尺寸，以使寬度和高度 完全適應內容區域。背景影象始終被包含在容器內,
背景圖不會發生變形
五、設定透明背景： background:rgba(r,g,b,a); a代表透明度
eg: background:rgba(0,0,0,.4);
注：rgba和opacity的區別：
設定rgba背景帶有一定的透明度，容器中的文字和不會跟隨透明
設定opacity是給整個容器新增一定的透明度，文字和也會透明
六、顏色模式： background:hsla(h,s,l,a);
h: 色調，取值範圍0~360
s: 飽和度，取值範圍 0%~100%
l: 亮度，取值範圍0%~100%
a: 透明度，取值範圍0~1
七、線性漸變： background:linear-gradient(方向,顏色值 位置,顏色值 位置);
eg: background:linear-gradient(to right,red 0%,yellow 30%,green 35%);
注：重複線性漸變
eg: background:repeating-linear-gradient(red 0%,yellow 10%,green 20%);
設定重複線性漸變時，一定要自定義線性漸變的位置
八、徑向漸變： background:-webkit-radial-gradient(中心點位置,形狀 漸變半徑,顏色 位置,顏色 位置);
eg: background:-webkit-radial-gradient(10% 80%,circle closest-corner,red 0%,yellow 15%,green 25%);
注：漸變半徑可選引數值：
a) closest-corner 圓心到離圓心最近的角
b) closest-side 圓心到離圓心最近的邊
c) farthest-corner 圓心到離圓心最遠的角
d) farthest-side 圓心到離圓心最遠的邊
注：重複徑向漸變
eg: background:-webkit-repeating-radial-gradient(red 0%,yellow 5%,green 10%);
擴充套件：
1.新增蒙版
-webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;
-webkit-mask-position:left center;
2.設定背景可視區域為文字區域
語法： -webkit-background-clip:text;
注：設定此屬性，文字顏色需要設定為透明（即color:transparent）
3.倒影
：-webkit-box-reflect:倒影方向 偏移量 倒影漸變;
a) 倒影方向 left|right|above(上)|below(下)
b) 偏移量
從零開始學習web前端開發
之前半個月一直在學習深度學習，但是感覺自己的能力還沒到那個程度所以就想擱置一下，從程式設計師基礎的前端開發來學。廢話不多說直接開記 我所使用的前端開發軟體就是業內很流行的vscode，作為小白的我當然也是用的這個 具體的安裝教程，外掛程式教程網上都有詳細的介紹，在此處不多講 在vscode中輸入 就...
從零開始學習前端開發 3 CSS盒模型
css盒模型是css的基石，每個html標籤都可以看作是乙個盒模型。css盒模型是由內容 content 補白或填充 padding 邊框 border 外邊距 margin 四部分組成 1.內容 content 寬度 width 數值 單位 高度 height 數值 單位 eg box 2.補白或...
從零開始的wed前端學習 css基礎
繼承性 層疊性 可被覆蓋 1.後來者居上原則 後來的樣式覆蓋先前的樣式,越往後越說的算 2.行內樣式優先順序大於頭部樣式與外部樣式 3.頭部樣式優先順序大於等於外部樣式 因為後來者居上原則頭部樣式優先順序大於外部樣式 4.越精確越說的算,id選擇器 class類選擇器 標籤選擇器 5.importa...