(一).背景
☞ 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新特性詳解
本篇文章給大家帶來的內容是關於css3有哪些新特性？css3新特性詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。新增選擇器 p nth child n 彈性盒模型 display flex 多列布局 column count 5 查詢 media max width 480px...
CSS3新特性總結
1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整...
css3的新特性
1.文字陰影text shadow text shadow 偏移量x 偏移量y 模糊度 顏色 注意 水平偏移量 正值向右，負值向左 垂直偏移量 正值向下，負值向上 模糊度不能為負數 可設定多個text shadow，每個用逗號分隔 例子 text shadow 1px 2px 3px red,2px...