CSS3總結
一、選擇器
1.通用選擇器
E~F:E後邊所有和E同級的F
2.屬性選擇器
E[att^=’val’]：att屬性中以val開頭的
E[att$=’val’]:以val結尾的
E[att*=’val’]含有val的選擇器
3.僞類選擇器
E:nth-child(n)：選中E的父親的第n個孩子並且該孩子必須是E否則選不中
E:nth-of-type(n)：選中所有的E再從中選出第N個E
二、圓角、邊框、陰影
1.圓角
border-radius：10px 10px 10px 10px/10px 10px 10px 10px
2.邊框
border-p_w_picpath:url() (10% 10% 10% 10%|10 10 10 10) (stretch | repeat | round)
3.陰影
text-shadow:水平偏移量 垂直偏移量 陰影模糊值 顏色(rgba)，
水平偏移量 垂直偏移量 陰影模糊值 顏色(rgba)，
水平偏移量 垂直偏移量 陰影模糊值 顏色(rgba);
box-shadow:水平偏移量 垂直偏移量 陰影模糊值 陰影外延值 顏色(rgba)，
水平偏移量 垂直偏移量 陰影模糊值 陰影外延值 顏色(rgba)，
水平偏移量 垂直偏移量 陰影模糊值 陰影外延值 顏色(rgba);
三、背景、蒙版
1.背景
background-clip:border-box | padding-box | content-box;
background-origin:border-box | padding-box | content-box;
Background-size:length： 100px 500px 水平 豎直長度值指定 percentage： 百分比指定 auto： 真實大小 cover：等比縮放到完全覆蓋容器，背景圖像有可能超出容器 contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內
2.漸變
一般要寫在背景或者蒙版裏
background：-webkit-linear-gradient(top,red 0%,blue 100%);
-webkit-mask-p_w_picpath:-webkit-radial-gradient(50% 50px,red 0%,blue 100%);
3.蒙版
-webkit-mask-p_w_picpath:url()|gradient(rgba(0,0,0,1));
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat;
-webkit-mask-position:x y;
-webkit-mask-origin:border|padding|content;
-webkit-mask-clip:border|padding|content;
4.文字漸變
color:rgba(0,0,0,0);
background:-webkit-linear-gradient(top,red 0%,blue 100%);
-webkit-background-clip:text;
四、變形倒影
1.倒影
-webkit-box-reflect: below 5px -webkit-linear-gradient(right,rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
2.變形
-webkit-transform-origin: [percentage | length | left | center | right] [percentage | length | top | center | bottom];
-webkit-transform: rotate(30deg) translate(xpx,ypx) scale(x,y) skew(x,y);
五、分欄自適應
1.分欄
column-count:number;
column-gap:5px;
Column-width:10px;
column-rule : 寬度，顏色; 類似border
column-rule-style : dotted
2.自適應
display : box； 定義子元素內容的呈現形式
-webkit-box-orient：horizontal | vertical | inline-axis | block-axis | inherit
子元素的排列方式（橫向或者豎向）
-webkit-box-direction：normal | reverse | inherit
子元素的排列順序
-webkit-box-flex:分配剩餘空間
box-ordinal-group：子元素顯示順序
屬性：
box-align：子元素的垂直對齊方式
start | end | center | baseline | stretch
box-pack：子元素的水平對齊方式
start | end | center | justify
屬性“box-pack”管理水平方向上的空間分佈，有以下四個可能屬性：start、end、 justify、 or center。
start 所有盒子在父盒子的左側，餘下的空間在右側；
end所有盒子在父盒子的右側，餘下的空間在左側；
justify 餘下的空間在盒子間平均分配；
center 可利用的空間在父盒子的兩側平均分配。
屬性“box- align”管理垂直方向上的空間分佈，有以下五個可能屬性之：start、 end,、center、 baseline和 stretch。
start 每個盒子沿父盒子的上邊緣排列，餘下的空間位於底部；
end 每個盒子沿父盒子的下邊緣排列，餘下的空間位於頂部；
center 可用空間平均分配，上面一半，下面一半；
baseline 所有盒子沿着它們的基線排列，餘下的空間可前可後；
stretch 每個盒子的高度調整到適合父盒子的高度
六、過渡
-webkit-transition:all 5s ease-in 5s;
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
默認值：看每個獨立屬性
取值
[ transition-property ]： 檢索或設置對象中的參與過渡的屬性
[ transition-duration ]： 檢索或設置對象過渡的持續時間
[ transition-timing-function ]： 檢索或設置對象中過渡的動畫類型
[ transition-delay ]： 檢索或設置對象延遲過渡的時間
七、動畫
視角：-webkit-perspective:500px;
看的位置：-webkit-perspective-origin: 50% 100px;
-webkit-animation:a1 3s ease-in;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
@-webkit-keyframes a1{
from{}
%{}
to{}
}
3D命令
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;