CSS3總結

 

CSS3總結

1、選擇器

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

2、圓角、邊框、陰影

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);

3、背景、蒙版

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;

4、變形倒影

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);

5、分欄自適應

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 每一個盒子的高度調整到適合父盒子的高度

6、過渡

-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 ]： 檢索或設置對象延遲過渡的時間

7、動畫

視角：-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;