background-origin： 規定背景的定位區域。☞ padding-box 背景影象相對內邊距定位（預設值）
☞ border-box 背景影象相對邊框定位【以邊框左上角為參照進行位置設定】
☞ content-box 背景影象相對內容區域定位【以內容區域左上角為參照進行位置設定】
備註：1. 預設盒子的背景是在盒子的內邊距左上角對齊設定。
background-clip： 規定背景的繪製區域。
☞ border-box 背景被裁切到邊框盒子位置 【將背景在整個容器中顯示】
☞ padding-box 背景被裁切到內邊距區域【將背景在內邊距區域（包含內容區域）顯示】
☞ content-box 背景被裁切到內容區域【將背景在內容區域顯示】
☞ cover 將背景按照原來的縮放比,將整個容器鋪滿
☞ contain 將背景按照原來的縮放比,完整的顯示到容器中
box-shadow： 盒子陰影border-radius： 邊框圓角
/* 第乙個0px 代表陰影在水平方向的偏移量（正數向右，負數向左）*/
/* 第二個0px 代表陰影在垂直方向的偏移量（正數代表向下，負數代表向上）*/
/* 第三個10px代表陰影的模糊度 （不能設定負數）*/
/* 設定多個陰影，使用逗號隔開
box-shadow:0px 0px 10px red,5px -5px 10px blue;
border-image: 邊框
/* 設定邊框 */
border-image-source: url("2.png");
/* 邊框裁切 : 不需要帶單位*/
border-image-slice: 20;
/* 設定邊框的平鋪方式 */
/* border-image-repeat: stretch; */
border-image-repeat: round;
/* border-image-repeat: repeat; */
border-image-width: 20px;
☞text-shadow： 設定文字陰影
☞ 屬性選擇器：[屬性名=值] {}
[屬性名] {} 匹配對應的屬性即可
[屬性名^=值] {} 以值開頭
[屬性名*=值] {} 包含
[屬性名$=值] {} 以值結束
☞ 結構偽類選擇器：
:first-child {} 選中父元素中第乙個子元素
:last-child {} 選中父元素中最後乙個子元素
:nth-child(n) {} 選中父元素中正數第n個子元素
:nth-last-child(n) {} 選中父元素中倒數第n個子元素
備註；n 的取值大於等於0
n 可以設定預定義的值
odd【選中奇數字置的元素】
even【選中偶數字置的元素】
n 可以是乙個表示式：
an+b的格式
☞ 其他選擇器：
:target 被錨鏈結指向的時候會觸發該選擇器
::selection 當被滑鼠選中的時候的樣式
::first-line 選中第一行
::first-letter 選中第乙個字元
☞ 線性漸變：1. 開始顏色和結束顏色
2. 漸變的方向
3. 漸變的範圍
background-image: linear-gradient(
to right,
red,
blue
);備註：
表示方向：
1. to + right | top | bottom | left
2. 通過角度表示乙個方向
0deg 【從下向上漸變】
90deg【從左向右】
☞ 徑向漸變：
/* 徑向漸變 */
background-image: radial-gradient(
100px at center,
red,
blue
);
☞ 位移transform: translate(100px,100px);
備註：位移是相對元素自身的位置發生位置改變
☞ 旋轉
transform: rotate(60deg);
備註：取值為角度
☞ 縮放
transform: scale(0.5,1);
備註：取值為倍數關係，縮小大於0小於1，放大設定大於1
☞ 傾斜
transform: skew(30deg,30deg);
備註：第乙個值代表沿著x軸方向傾斜
第二個值代表沿著y軸方向傾斜
☞ 位移transform: translatex() translatey() translatez()
☞ 旋轉
transform: rotatex(60deg) rotatey(60deg) rotatez(60deg);
☞ 縮放
transform: scalex(0.5) scaley(1) scalez(1);
☞ 傾斜
transform: skewx(30deg) skewy();
☞ transform-style: preserve-3d;
將平面圖形轉換為立體圖形
補間動畫
/* 設定哪些屬性要參與到過渡動畫效果中： all */
transition-property: all;
/* 設定過渡執行時間 */
transition-duration: 1s;
/* 設定過渡延時執行時間 */
transition-delay: 1s;
/* 設定過渡的速度型別 */
transition-timing-function: linear;
/* 1定義動畫集 */@keyframes rotate
/* 結束狀態 100%*/
to }
注意：1. 如果設定動畫集使用的是百分比，那麼記住百分比是相對整個動畫執行時間的。
☞ 設定父元素為伸縮盒子【直接父元素】display： flex
為什麼在伸縮盒子中，子元素會在一行上顯示？
1. 子元素是按照伸縮盒子中主軸方向顯示
2. 只有伸縮盒子才有主軸和側軸
3. 主軸： 預設水平從左向右顯示
4。 側軸： 始終要垂直於主軸
☞ 設定伸縮盒子主軸方向（flex-direction）
flex-direction: row; 【預設值】
flex-direction: row-reverse; 反轉
flex-direction: column;垂直
flex-direction: column-reverse;垂直反轉
☞ 設定元素在主軸的對齊方式( justify-content)
/* 設定子元素在主軸方向的對齊方式 */
justify-content: flex-start; 向主軸的最左側對齊
justify-content: flex-end; 向主軸的最右側對齊
justify-content: center; 在主軸的最中間
justify-content: space-between; 向兩端對齊的平鋪
justify-content: space-around; 環繞對齊平鋪
☞ 設定元素在側軸的對齊方式 （align-items）
align-items: flex-start;向側軸的最上面對齊
align-items: flex-end;向側軸的最下面對齊
align-items: center;在側軸的最中間
/* 預設值 */
align-items: stretch;
☞ 設定元素是否換行顯示（flex-wrap）
1. 在伸縮盒子中所有的元素預設都會在一行上顯示
2. 如果希望換行：
flex-wrap: wrap | nowrap;
☞ 設定元素換行後的對齊方式（ align-content）
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
/* 換行後的預設值 */
align-content: stretch;
CSS3布局樣式
css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的...
CSS3布局樣式
1.多列布局 columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面。columns column width column count 引...
css3之布局相關的樣式
本篇主要講布局相關的樣式。1 多欄布局。在css3之前，若要實現分欄的效果，可以使用浮動 float 來實現。但是這樣會有乙個缺點就是，分欄時造成分欄的幾個欄不能對齊。而在css3中，可以通過column count屬性來進行多欄布局，這個屬性的含義是將乙個元素中的內容分成多欄進行顯示。使用方法 c...