day7小結

1、CSS3是CSS2.1的一個升級版，它是對CSS的一個擴充套件。
2、CSS3的主要新特性：
1）選擇器
2）陰影
3）形狀轉換（2D<->3D）
4）變形
5）動畫（過渡動畫、幀動畫）
6）邊框
7）多重背景
8）反射
9）文字
10）顏色（rgba/hsl/hsla）
11）濾鏡（filter）
12）彈性佈局
13）多列布局
14）盒模型
15）Web字型
16）媒體查詢
3、CSS3不是所有瀏覽器或同一瀏覽器的不同版本都支援，所以需要相容處理，通常的做法就是加廠商字首。
1）主流瀏覽器核心（面試點）
a）Trident：IE核心
b）Webkit：Chrome和Safari核心
c）Gecko：FireFox核心
d）Blink（Webkit的一個分支）：Chrome和Opera核心

    Tips（技巧）：
        目前國內的瀏覽器大多都是雙核的（IE核心+Chrome核心）
2）廠商字首
    IE：-ms-
    Chrome&Safari: -webkit-
    FireFox：-moz-
    Opera: -o-

4、CSS3選擇器
豐富選擇的目的：在標籤中減少class和id的使用。
1）屬性選擇器
[屬性名]
[屬性名=屬性值]
[屬性名^=屬性值]
[屬性名$=屬性值]
[屬性名*=屬性值]
2）結構性偽類
:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:only-child
:only-of-type
:empty
3）目標偽類
:target
4）UI元素狀態偽類
:checked (只在opera瀏覽器中有效)
:disabled
:enabled
:selection
5）否定偽類
:not()
6）通用兄弟元素選擇器
~
5、CSS3文字
1）文字陰影（主流瀏覽器都支援）
text-shadow：水平偏移距離垂直偏移距離 [模糊度距離] [陰影的尺寸] [顏色] [inset]；
2）文字自動換行（主流瀏覽器都支援）
word-wrap: normal|break-word;
3）單詞拆分（主流瀏覽器都支援）
word-break: normal|break-all|keep-all;
4）文字拆分（所有主流瀏覽器都不支援）
text-wrap: normal|none|unrestricted|suppress;
5）文字溢位（重要）
a）單行文字溢位（重要）
text-overflow: clip|ellipsis|string;

            處理文字溢位樣式：
                width: px/%/en/rem...;
                white-space: nowrap; /* 不允許拆行 */
                -ms-text-overflow: ellipsis; /* 處理IE相容 */
                text-overflow: ellipsis;
                overflow: hidden;

        b）多行文字溢位（IE9以下的版本不支援，主要是谷歌支援）
                width: px/%/em/rem...;
                display: -webkit_box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 行數;
                overflow: hidden;

6、CSS3邊框
1）圓角邊框（掌握）
border-radius: 1-4 length|% / 1-4 length|%;

    四個方位的詞：top-left/top-right/bottom-left/bottom-right
2）邊框陰影（IE9以上支援）
    box-shadow：水平偏移距離 垂直偏移距離 [模糊度距離] [陰影的尺寸] [顏色] [inset]；
3）邊框圖片（IE11.0及以後版本支援）
    border-image：圖片 向內偏移距離 寬度 影像區域超出邊框的距離 重複效果;

    重複效果：round/stretch/repeat

7、CSS3背景
1）多重背景
background：背景色背景圖片平鋪方式位置，背景色背景圖片平鋪方式位置，…
2）background-size：設定背景影像的尺寸。
background-size：固定長度|百分比值|cover|contain;
3）background-origin：指定背景影像的位置區域。
background-origin：padding-box|border-box|content-box;
4）background-clip：屬性規定背景的繪製區域。
background-clip：border-box|padding-box|content-box;
5）漸變背景
8、CSS3顏色函式
1）RGBA
rgba(r,g,b,a)
r:紅色取值範圍：0-255/0-100%
g:綠色取值範圍：0-255/0-100%
b:藍色取值範圍：0-255/0-100%
a:不透明度取值範圍：0-1的一個小數
2）HSL
hsl(h,s,l)
h：色調取值範圍：0-360
s：飽和度取值範圍：0-100%
l：亮度取值範圍：0-100%
3）HSLA
hsla(h,s,l,a)
h：色調取值範圍：0-360
s：飽和度取值範圍：0-100%
l：亮度取值範圍：0-100%
a:不透明度取值範圍：0-1的一個小數
9、opacity
調整元素的不透明度，大多數情況下用於做元素的遮罩效果。取值範圍：0-1的一個小數
IE8及8以下版本不支援opacity，處理相容的方式，再新增一行程式碼來處理不透明度：
filter:alpha(opacity=數值) 數值的範圍：0-100
10、CSS3漸變
1）線性漸變
background：linear-gradient（方向或角度，顏色1，顏色2，…）；
方向：
to left:從右向左漸變
to right:從左向右漸變
to top:從下向上漸變
to bottom:從上向下漸變
to top left:從右下角向左上角漸變
to top right:從左下角向右上角漸變
to bottom left:從右上角向左下角漸變
to bottom right:從左上角向右下角漸變
角度：
比如45度角，應表示為：45deg
顏色取值：
1）表示顏色的單詞
2）16進位制顏色
3）表示顏色的函式（rgb()/rgba()/hsl()/hsla()…）
2）徑向漸變

day7小結

相關文章