CSS是一門不斷在發展的“語言”,在我們日常面試前端工作的時候是必不可少的一個知識點,下面這篇文章主要給大家分享介紹了關於前端面試必備之CSS3新特性的相關資料,文中通過範例程式碼介紹的非常詳細,需要的朋友可以參考借鑒,下面來一起看看吧。
前言
之前我們已經給大家介紹了關於html5的新特性,除了html5的新特性,CSS3的新特性也是面試中經常被問到的。下面話不多說了,需要的朋友們跟隨小編來一起看看詳細的介紹吧。
選取器
CSS3中新添加了很多選取器,解決了很多之前需要用javascript才能解決的布局問題。
element1~element2: 選擇前面有element1元素的每個element2元素。
[attribute^=value]: 選擇某元素attribute屬性是以value開頭的。
[attribute$=value]: 選擇某元素attribute屬性是以value結尾的。
[attribute*=value]: 選擇某元素attribute屬性包含value字串的。
E:first-of-type: 選擇屬於其父元素的首個E元素的每個E元素。
E:last-of-type: 選擇屬於其父元素的最後E元素的每個E元素。
E:only-of-type: 選擇屬於其父元素唯一的E元素的每個E元素。
E:only-child: 選擇屬於其父元素的唯一子項目的每個E元素。
E:nth-child(n): 選擇屬於其父元素的第n個子項目的每個E元素。
E:nth-last-child(n): 選擇屬於其父元素的倒數第n個子項目的每個E元素。
E:nth-of-type(n): 選擇屬於其父元素第n個E元素的每個E元素。
E:nth-last-of-type(n): 選擇屬於其父元素倒數第n個E元素的每個E元素。
E:last-child: 選擇屬於其父元素最後一個子項目每個E元素。
:root: 選擇文檔的根項目。
E:empty: 選擇沒有子項目的每個E元素(包括文本節點)。
E:target: 選擇當前活動的E元素。
E:enabled: 選擇每個啟用的E元素。
E:disabled: 選擇每個禁用的E元素。
E:checked: 選擇每個被選中的E元素。
E:not(selector): 選擇非selector元素的每個元素。
E::selection: 選擇被使用者選取的元素部分。
Transition,Transform和Animation
這三個特性是CSS3新增的和動畫相關的特性。
Transition
Transition可以在當元素從一種樣式變換為另一種樣式時為元素添加效果,而不用使用Flash動畫或JavaScript。
Transition有如下屬性:
transition-property: 規定應用過渡的CSS屬性的名稱。
transition-duration: 規定完成過渡效果需要多長時間。
transition-delay: 規定過渡效果何時開始,預設是0。
transition-timing-function: 規定過渡效果的時間曲線,預設是”ease”,還有linear、ease-in、ease-out、ease-in-out和cubic-bezier等過渡類型。
transition: 簡寫屬性,用於在一個屬性中設定四個過渡屬性。
在一個例子中使用所有過渡屬性如下:
p { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s;}
使用transition屬性簡寫如下:
p { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari and Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s;}
Transform
Transform用來向元素應用各種2D和3D轉換,該屬性允許我們對元素進行旋轉、縮放、移動或傾斜等操作。使用方式如下:
p{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */}
變換類型
transform可以有各種變換類型,即屬性值:
none: 定義不進行轉換。
matrix(n,n,n,n,n,n): 定義2D轉換,使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定義3D轉換,使用16個值的4x4矩陣。
translate(x,y): 定義2D位移轉換。
translate3d(x,y,z): 定義3D位移轉換。
translateX(x): 定義位移轉換,只是用X軸的值。
translateY(y): 定義位移轉換,只是用Y軸的值。
translateZ(z): 定義3D位移轉換,只是用Z軸的值。
scale(x,y): 定義2D縮放轉換。
scale3d(x,y,z): 定義3D縮放轉換。
scaleX(x): 通過設定X軸的值來定義縮放轉換。
scaleY(y): 通過設定Y軸的值來定義縮放轉換。
scaleZ(z): 通過設定Z軸的值來定義3D縮放轉換。
rotate(angle): 定義2D旋轉,在參數中規定角度。
rotate3d(x,y,z,angle): 定義3D旋轉。
rotateX(angle): 定義沿著X軸的3D旋轉。
rotateY(angle): 定義沿著Y軸的3D旋轉。
rotateZ(angle): 定義沿著Z軸的3D旋轉。
skew(x-angle,y-angle): 定義沿著X和Y軸的2D傾斜轉換。
skewX(angle): 定義沿著X軸的2D傾斜轉換。
skewY(angle): 定義沿著Y軸的2D傾斜轉換。
perspective(n): 為3D轉換元素定義透視視圖。
瀏覽器支援
Internet Explorer 10、Firefox、Opera 支援 transform 屬性。
Internet Explorer 9 支援替代的 -ms-transform 屬性(僅適用於 2D 轉換)。
Safari 和 Chrome 支援替代的 -webkit-transform 屬性(3D 和 2D 轉換)。
Opera 只支援 2D 轉換。
Animation
Animation讓CSS擁有了可以製作動畫的功能。使用CSS3的Animation製作動畫我們可以省去複雜的js代碼。使用方法大概如下:
@-webkit-keyframes anim1 { 0% { opacity: 0; font-size: 12px; } 100% { opacity: 1; font-size: 24px; } } .anim1p { -webkit-animation-name: anim1 ; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; }
具體用法可以參考教程:CSS3 Animation。
邊框
CSS3新增了三個邊框屬性,分別是border-radius、box-shadow和border-image。border-radius可以建立圓角邊框,box-shadow可以為元素添加陰影,border-image可以使用圖片來繪製邊框。IE9+支援border-radius和box-shadow屬性。Firefox、Chrome以及Safari支援所有新的邊框屬性。
背景
CSS3新增了幾個關於背景的屬性,分別是background-clip、background-origin、background-size和background-break。
background-clip
background-clip屬性用於確定背景畫區,有以下幾種可能的屬性:
background-clip: border-box; 背景從border開始顯示
background-clip: padding-box; 背景從padding開始顯示
background-clip: content-box; 背景顯content地區開始顯示
background-clip: no-clip; 預設屬性,等同於border-box
通常情況,背景都是覆蓋整個元素的,利用這個屬性可以設定背景顏色或圖片的覆蓋範圍。
background-origin
background-clip屬性用於確定背景的位置,它通常與background-position聯合使用,可以從 border、padding、content來計算background-position(就像background-clip)。
background-origin: border-box; 從border開始計算background-position
background-origin: padding-box; 從padding開始計算background-position
background-origin: content-box; 從content開始計算background-position
background-size
background-size屬性常用來調整背景圖片的大小,主要用於設定圖片本身。有以下可能的屬性:
background-size: contain; 縮小圖片以適合元素(維持像素長寬比)
background-size: cover; 擴充元素以填補元素(維持像素長寬比)
background-size: 100px 100px; 縮小圖片至指定的大小
background-size: 50% 100%; 縮小圖片至指定的大小,百分比是相對包 含元素的尺寸
background-break
CSS3中,元素可以被分成幾個獨立的盒子(如使內嵌元素span跨越多行),background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示。
background-break: continuous; 預設值。忽略盒之間的距離(也就是像元素沒有分成多個盒子,依然是一個整體一樣)
background-break: bounding-box; 把盒之間的距離計算在內;
background-break: each-box; 為每個盒子單獨重繪背景。
文字效果
word-wrap
CSS3中,word-wrap屬性允許您允許文本強制文本進行換行,即這意味著會對單詞進行拆分。所有主流瀏覽器都支援 word-wrap 屬性。
p { word-wrap:break-word;}
text-overflow
它與word-wrap是協同工作的,word-wrap設定或檢索噹噹前行超過指定容器的邊界時是否斷開轉行,而 text-overflow則設定或檢索噹噹前行超過指定容器的邊界時如何顯示。對於“text-overflow”屬性,有“clip”和“ellipsis”兩種可供選擇。
text-shadow
CSS3中,text-shadow可向文本應用陰影。能夠規定水平陰影、垂直陰影、模糊距離,以及陰影的顏色。
h1{ text-shadow: 5px 5px 5px #FF0000;}
text-decoration
CSS3裡面開始支援對文字的更深層次的渲染,具體有三個屬性可供設定:
text-fill-color: 設定文字內部填充顏色
text-stroke-color: 設定文字邊界填充顏色
text-stroke-width: 設定文字邊界寬度
漸層
CSS3新增了漸層效果,包括linear-gradient(線性漸層)和radial-gradient(放射狀漸層)。具體用法參考教程:CSS3 Gradient
@font-face特性
在CSS3之前,web設計師必須使用已在使用者電腦上安裝好的字型。通過CSS3,web設計師可以使用他們喜歡的任意字型。當您您找到或購買到希望使用的字型時,可將該字型檔存放到web伺服器上,它會在需要時被自動下載到使用者的電腦上。字型是在 CSS3 @font-face 規則中定義的。Firefox、Chrome、Safari以及Opera支援 .ttf(True Type Fonts)和 .otf(OpenType Fonts)類型的字型。IE9+ 支援新的@font-face規則,但是僅支援 .eot類型的字型(Embedded OpenType)。
在新的@font-face規則中,必須首先定義字型的名稱(比如myFont),然後指向該字型檔。
如需為HTML元素使用字型,請通過font-family屬性來引用字型的名稱 (myFont)
@font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */}p{ font-family:myFirstFont;}
多欄版面配置
通過CSS3,能夠建立多個列來對文本進行布局,IE10和Opera支援多列屬性。Firefox 需要首碼-moz-,Chrome和Safari需要首碼-webkit-。主要有如下三個屬性:
column-count: 規定元素應該被分隔的列數。
column-gap: 規定列之間的間隔。
column-rule: 設定列之間的寬度、樣式和色彩規則
p{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari 和 Chrome */ column-gap:40px; -moz-column-rule:3px outset #ff0000; /* Firefox */ -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ column-rule:3px outset #ff0000;}
使用者介面
CSS3中,新的使用者介面特性包括重設元素尺寸、盒尺寸以及輪廓等。Firefox、Chrome以及Safari 支援resize屬性。IE、Chrome、Safari以及Opera支援box-sizing屬性。Firefox需要首碼-moz-。
所有主流瀏覽器都支援outline-offset屬性,除了IE。
resize
resize 屬性規定是否可由使用者調整元素尺寸。如果希望此屬性生效,需要設定元素的 overflow 屬性,值可以是 auto、hidden 或 scroll。
p{ resize:both; /* none|both|horizontal|vertical; */ overflow:auto;}
box-sizing
box-sizing屬性可設定的值有content-box、border-box和inherit。
content-box: padding和border不被包含在定義的width和height之內。對象的實際寬度等於設定的width值和border、padding之和,即 (Element width = width + border + padding),此屬性工作表現為標準模式下的盒模型。
border-box: padding和border被包含在定義的width和height之內。對象的實際寬度就等於設定的width值,即使定義有border和padding也不會改變對象的實際寬度,即 (Element width = width),此屬性工作表現為怪異模式下的盒模型。
outline-offset
outline-offset屬性對輪廓進行位移,並在超出邊框邊緣的位置繪製輪廓。