說說你常用的css3屬性有哪些?【專欄08】

1.CSS3邊框：

• border-radius：CSS3圓角邊框。
• box-shadow：CSS3邊框陰影。
• border-image：CSS3邊框圖片。

2.CSS3背景：

• background-size：屬性規(guī)定背景圖片的尺寸。
• background-origin ：屬性規(guī)定背景圖片的定位區(qū)域。
• background-clip:指定背景圖片從什么位置開始裁剪

3.CSS3文字效果：

• text-shadow：在 CSS3 中，text-shadow 可向文本應(yīng)用陰影。
• word-wrap :單詞太長的話就可能無法超出某個(gè)區(qū)域，允許對長單詞進(jìn)行拆分，并換行到下一行

4.CSS3 2D轉(zhuǎn)換：

• transform：通過 CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M(jìn)行移動、縮放、轉(zhuǎn)動、拉長或拉伸。
• translate()：元素從其當(dāng)前位置移動，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)）

transform：translate（50px,100px）

• rotate()：實(shí)現(xiàn)元素的旋轉(zhuǎn)效果

transform:rotate(7deg);

• scale():實(shí)現(xiàn)元素的縮放效果

transform:scale(1.1,1.1);

• skew():實(shí)現(xiàn)元素的傾斜效果

transform:skew(10deg,10deg);

• matrix()：方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動以及傾斜元素。

transform: matrix(3, 0, 0, 0.5, 0, 0);

clip-path:clip-path里面的polygon功能，我們可以通過它來繪制多邊形

-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);

5.CSS3 過渡

transition

transition: width 2s;

6.CSS3 動畫

animation

animation:myAnimation 5s infinite;

選擇器

• div:nth-last-child(n)
• div:nth-of-type(n)
• div:nth-last-of-type(n)
• div:last-child
• div:first-of-type
• div:only-child
• div:only-of-type
• div:empty
• div:checked
• div:enabled
• div:disabled
• div::selection
• div:not(s)