【面試】前端面試之 CSS3 新特性

　　面試系列是收羅前端一系列常規,進階,高級等的面試題。本次收羅的是css3新特性。話不多說直接開始。

　　

 

 　　

CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。

1. element1~element2: 選擇前面有element1元素的每個element2元素。
2. [attribute^=value]: 選擇某元素attribute屬性是以value開頭的。
3. [attribute$=value]: 選擇某元素attribute屬性是以value結尾的。
4. [attribute*=value]: 選擇某元素attribute屬性包含value字符串的。
5. E:first-of-type: 選擇屬於其父元素的首個E元素的每個E元素。
6. E:last-of-type: 選擇屬於其父元素的最后E元素的每個E元素。
7. E:only-of-type: 選擇屬於其父元素唯一的E元素的每個E元素。
8. E:only-child: 選擇屬於其父元素的唯一子元素的每個E元素。
9. E:nth-child(n): 選擇屬於其父元素的第n個子元素的每個E元素。
10. E:nth-last-child(n): 選擇屬於其父元素的倒數第n個子元素的每個E元素。
11. E:nth-of-type(n): 選擇屬於其父元素第n個E元素的每個E元素。
12. E:nth-last-of-type(n): 選擇屬於其父元素倒數第n個E元素的每個E元素。
13. E:last-child: 選擇屬於其父元素最后一個子元素每個E元素。
14. :root: 選擇文檔的根元素。
15. E:empty: 選擇沒有子元素的每個E元素（包括文本節點)。
16. E:target: 選擇當前活動的E元素。
17. E:enabled: 選擇每個啟用的E元素。
18. E:disabled: 選擇每個禁用的E元素。
19. E:checked: 選擇每個被選中的E元素。
20. E:not(selector): 選擇非selector元素的每個元素。
21. E::selection: 選擇被用戶選取的元素部分。

 

Transition,Transform和Animation

　　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: 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
  在一個例子中使用所有過渡屬性如下：

• div {
      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;
  }

  簡練寫法：

• div {
      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;
  }

  一般簡練的就可以了，加如是大型項目，流量大，用戶多，可能多種瀏覽器都會用到，就需要寫兼容css。

　　　Transform用來向元素應用各種2D和3D轉換，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜等操作。使用方式如下

　　　　

div{
    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擁有了可以制作動畫的功能

　　animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

　　

animation-name	規定需要綁定到選擇器的 keyframe 名稱。。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始之前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

　　具體示例可以參考  css3 Animation

邊框

　　border-radius 圓角 

　　border-image 邊框圖片

　　box-shadow 陰影

背景

　　CSS3新增了幾個關於背景的屬性，分別是background-clip、background-origin、background-size和background-break。

文字效果

　　text-overflow 規定當文本溢出包含元素時發生的事情 text-overflow:ellipsis(省略)

　　word-wrap 強制文本換行

　　text-shadow 文本陰影，能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色。

　　　　h1{
　　　　　　text-shadow: 5px 5px 5px #FF0000;
　　　　}

　　text-decoration

　　　　CSS3里面開始支持對文字的更深層次的渲染，具體有三個屬性可供設置：

• text-fill-color: 設置文字內部填充顏色
• text-stroke-color: 設置文字邊界填充顏色
• text-stroke-width: 設置文字邊界寬度

漸變

　　linear-gradient(線性漸變)和radial-gradient(徑向漸變)

background-image:linear-gradient(90deg,yellow 20%,green 80%)

background-iamge:radial-gradient(120px at center center,yellow,green)

多列布局

　　column-count  column-width column-gap column-rule

界面

　　CSS3中，新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。Firefox、Chrome以及Safari 支持resize屬性。IE、Chrome、Safari以及Opera支持box-sizing屬性。Firefox需要前綴-moz-。所有主流瀏覽器都支持outline-offset屬性，除了IE。

　　以上就是收羅的關於css3新特性面試題，面試官可能會問你了解多少，亦或者問你具體的某個詳細的屬性，都有可能，總之多多准備，有備無患。希望這篇文章可以幫到你，謝謝觀看。