CSS3 新特性

CSS3 是最新的 CSS 標準，而且徹底向後兼容，不過目前W3C 仍然在對 CSS3 規範進行開發，雖然標準的規範尚未正式發佈，可是現代瀏覽器已經支持至關多的 CSS3 屬性了。CSS3 提供了不少能夠把玩的新特性，模糊了以前只控制樣式的定義，讓以前很難處理的樣式（如：圓角、多列等）和只能經過Javascript來實現的動畫效果等如今都能經過CSS3 新特性提供的屬性很輕鬆的實現，功能是愈來愈強大。

1、CSS3 邊框

在 css3 中新增的邊框屬性以下：

建立圓角邊框 示例

在CSS2中添加圓角很棘手，咱們不得不在每一個角落使用不一樣的圖像。可是在CSS3中經過添加一個屬性就能夠搞定，那就是border-radius ，代碼以下：

語法： border-radius : length length;

length： 由浮點數字和單位標識符組成的長度值（如：20px）。不可爲負值，若是爲負值則與0展現效果同樣。第一個值設置其水平半徑，第二個值設置其垂直半徑，若是第二個值省略則默認第二個值等於第一個值。

div{
  border: 1px solid;
  /* 設置每一個圓角水平半徑和垂直半徑都爲30px */
  border-radius: 30px;
}

border-radius 是4個角的縮寫方法。四個角的表示順序與border相似按照border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius的順序來設置：

div{
  border: 1px solid;
  /* 若是 / 先後的值都存在，那麼 / 前面的值設置其水平半徑，/ 後面值設置其垂直半徑，若是沒有 / ，則水平和垂直半徑相等 */
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;

  /* 上面寫法等價於下面的寫法，第一個值是水平半徑，第二個值是垂直半徑 */
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;
}

border-radius 指定不一樣數量的值遵循對角相等的原則，即指定了值的取指定值，沒有指定值的與對角值相等，對角相等模型以下：

邊框陰影

經過屬性box-shadow 向邊框添加陰影。

語法： {box-shadow : [inset] x-offset y-offset blur-radius extension-radius spread-radiuscolor}

說明：對象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量 模糊半徑 陰影擴展半徑 陰影顏色}

div{
  /* 內陰影，向右偏移10px，向下偏移10px，模糊半徑5px，陰影縮小10px */
  box-shadow: inset 10px 10px 5px -10px #888888;
}

box-shadow屬性的參數設置取值：

陰影類型：此參數可選。如不設值，默認投影方式是外陰影；如取其惟一值inset ，其投影爲內陰影；

X-offset:陰影水平偏移量，其值能夠是正負值。若是值爲正值，則陰影在對象的右邊，其值爲負值時，陰影在對象的左邊；

Y-offset:陰影垂直偏移量，其值也能夠是正負值。若是爲正值，陰影在對象的底部，其值爲負值時，陰影在對象的頂部；

Blur-radius:陰影模糊半徑：此參數可選，但其值只能是爲正值，若是其值爲0時，表示陰影不具備模糊效果，其值越大陰影的邊緣就越模糊；

Extension-radius陰影擴展半徑：此參數可選，其值能夠是正負值，若是值爲正，則整個陰影都延展擴大，反之值爲負值時，則縮小；

陰影顏色：此參數可選。如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致，特別是在webkit內核下的safari和chrome瀏覽器下表現爲透明色，在Firefox/Opera下表現爲黑色（已驗證），建議不要省略此參數。

邊框圖片

語法：

• border-image : border-image-source || border-image-slice [ / border-image-width] || border-image-repeat

• border-image ： none | image [ number | percentage]{1,4} [ / border-width>{1,4} ] ? [ stretch | repeat | round ]{0,2}

div{
  border-image:url(border.png) 30 30 round;

  border-image: url(border.png) 20/10px repeat;
}

border-image的參數說明：

• none:是border-image的默認值，若是取值爲none時，表示邊框無背景圖片；

• image：設置border-image的背景圖片，這個跟background-image同樣，使用絕對或相對的url地址，來指定背景圖片；

• number：number是一個數值，用來設置邊框的寬度，其單位是px，其實就像border-width同樣取值，可使用1~4個值，其具體表示四個方位的值，能夠參考border-width的設置方式；

• percntage：percntage也是用來設置邊框的寬度，跟number不一樣之處是，其使用的是百分比值來設置邊框寬度；

• stretch,repeat,round:他們是用來設置邊框背景圖片的鋪放方式，相似於background-position，其中stretch是拉伸，repeat是重複，round是平鋪，stretch爲默認值。
  border-image-slice 這玩意比較複雜，感受是看明白了，可是就是作不出例子的效果，不知道是資源圖片的緣由仍是寫法的緣由，仍是瀏覽器的緣由仍是寫例子的人本身都沒整明白，這東西如今比較糊，到時整明白在整理。

2、CSS3 背景

background-size 屬性 示例

在 CSS3 以前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，能夠設置背景圖片的尺寸，這就容許咱們在不一樣的環境中重複使用背景圖片。能夠像素或百分比規定尺寸。若是以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。

div{
  background:url(bg_flower.gif);
  /* 經過像素規定尺寸 */
  background-size:63px 100px;

  /* 經過百分比規定尺寸 */
  background-size:100% 50%;
  background-repeat:no-repeat;
}

background-origin 屬性 示例

規定背景圖片的定位區域，背景圖片能夠放置於 content-box、padding-box 或 border-box 區域，

div{
  background:url(bg_flower.gif);
  background-repeat:no-repeat;
  background-size:100% 100%;
  /* 規定背景圖片的定位區域 */
  background-origin:content-box;
}

區域的具體劃分以下：

background-clip 屬性 示例

與background-origin 屬性類似，規定背景顏色的繪製區域，區域劃分與background-origin 屬性相同。

div{
  background-color:yellow;
  background-clip:content-box;
}

CSS3 多重背景圖片 示例

CSS3 容許爲元素設置多個背景圖像

body{
  background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

3、CSS3 文本效果

text-shadow 屬性 示例

給爲本添加陰影，可以設置水平陰影、垂直陰影、模糊距離，以及陰影的顏色。

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

text-wrap 屬性 示例

設置區域內的自動換行。

語法： text-wrap: normal | none | unrestricted | suppress | break-word;

/* 容許對長單詞進行拆分，並換行到下一行 */
p {word-wrap:break-word;}

值	描述
normal	只在容許的換行點進行換行。
none	不換行。元素沒法容納的文本會溢出。
break-word	在任意兩個字符間換行。
suppress	壓縮元素中的換行。瀏覽器只在行中沒有其餘有效換行點時進行換行。

4、CSS3 字體

字體定義

在 CSS3 以前，web 設計師必須使用已在用戶計算機上安裝好的字體。可是經過 CSS3，web 設計師可使用他們喜歡的任意字體。當找到或購買到但願使用的字體時，可將該字體文件存放到 web 服務器上，它會在須要時被自動下載到用戶的計算機上。字體須要在 CSS3 @font-face 規則中定義。

/* 定義字體 */
@font-face{
  font-family: myFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot');     /* IE9+ */
}

div{
  font-family:myFont;
}

使用粗體字體

"Sansation_Light.ttf"文件 是定義的正常字體，"Sansation_Bold.ttf" 是另外一個字體文件，它包含了 Sansation 字體的粗體字符。只要 font-family 爲 "myFirstFont" 的文本須要顯示爲粗體，瀏覽器就會使用該字體。

（其實沒弄清楚這樣處理的緣由，經測試直接在html中經過 b 標籤也能夠實現加粗的效果）

/* 定義正常字體 */
@font-face{
  font-family: myFirstFont;
  src: url('/example/css3/Sansation_Light.ttf'),
       url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}

/* 定義粗體時使用的字體 */
@font-face{
  font-family: myFirstFont;
  src: url('/example/css3/Sansation_Bold.ttf'),
       url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
  /* 標識屬性 */
  font-weight:bold;
}

div{
  font-family:myFirstFont;
}

5、CSS3 2D 轉換

經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸，轉換是使元素改變形狀、尺寸和位置的一種效果。

translate() 方法 示例

經過 translate(x , y) 方法，元素根據給定的 left（x 座標） 和 top（y 座標） 位置參數從其當前位置移動，x爲正值向右移動，爲負值向左移動；y爲正值向下移動，爲負值向上移動；

div{
  transform: translate(50px,100px);
  -ms-transform: translate(50px,100px);           /* IE 9 */
  -webkit-transform: translate(50px,100px);     /* Safari and Chrome */
  -o-transform: translate(50px,100px);           /* Opera */
  -moz-transform: translate(50px,100px);        /* Firefox */
}

rotate() 方法 示例

控制元素順時針旋轉給定的角度。爲正值，元素將順時針旋轉。爲負值，元素將逆時針旋轉。

div{
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);        /* IE 9 */
  -webkit-transform: rotate(30deg);    /* Safari and Chrome */
  -o-transform: rotate(30deg);         /* Opera */
  -moz-transform: rotate(30deg);       /* Firefox */
}

scale() 方法 示例

根據給定的寬度（X 軸）和高度（Y 軸）參數，控制元素的尺寸的增長、減小。

div{
  transform: scale(2,4);
  -ms-transform: scale(2,4);         /* IE 9 */
  -webkit-transform: scale(2,4);     /* Safari 和 Chrome */
  -o-transform: scale(2,4);            /* Opera */
  -moz-transform: scale(2,4);       /* Firefox */
}

skew() 方法 示例

根據給定的水平線（X 軸）和垂直線（Y 軸）參數設置元素翻轉給定的角度。

/* 設置圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。 */
div{
  transform: skew(30deg,20deg);
  -ms-transform: skew(30deg,20deg);         /* IE 9 */
  -webkit-transform: skew(30deg,20deg);     /* Safari and Chrome */
  -o-transform: skew(30deg,20deg);          /* Opera */
  -moz-transform: skew(30deg,20deg);        /* Firefox */
}

matrix() 方法 示例

matrix() 方法把全部 2D 轉換方法組合在一塊兒。matrix() 方法須要六個參數，包含數學函數，容許旋轉、縮放、移動以及傾斜元素。

/* 使用 matrix 方法將 div 元素旋轉 30 度 */
div{
  transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);          /* IE 9 */
  -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);         /* Firefox */
  -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Safari and Chrome */
  -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);           /* Opera */
}

2D Transform 方法彙總

函數	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
translate(x,y)	定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n)	定義 2D 轉換，沿着 X 軸移動元素。
translateY(n)	定義 2D 轉換，沿着 Y 軸移動元素。
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n)	定義 2D 縮放轉換，改變元素的寬度。
scaleY(n)	定義 2D 縮放轉換，改變元素的高度。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉換，沿着 X 軸。
skewY(angle)	定義 2D 傾斜轉換，沿着 Y 軸。

6、CSS3 3D 轉換

CSS3 容許使用 3D 轉換來對元素進行格式化

rotateX() 方法 示例

/* 設置元素圍繞其 X 軸以給定的度數進行旋轉 */
div{
  transform: rotateX(120deg);
  -webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
  -moz-transform: rotateX(120deg);    /* Firefox */
}

rotateY() 旋轉 示例

/* 設置元素圍繞其 Y 軸以給定的度數進行旋轉 */
div{
  transform: rotateY(130deg);
  -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
  -moz-transform: rotateY(130deg);    /* Firefox */
}

2017百度前端學院熱身試題 百度前端學院熱身試題-第三題 就重點考察了元素2D、3D轉換的內容，說明這部分是比較適用比較重要的部分，要熟練掌握。

7、CSS3 過渡

經過 CSS3能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

要實現這一點，必須規定如下兩項內容：

• 設置添加過渡效果的 CSS 屬性；

• 設置過渡效果的時長；

注意： 若是時長未設置，則不會有過渡效果，由於默認值是 0。

單項改變 示例

/* 設置將變化效果添加在「寬度」上，時長爲2秒；該時長在其餘屬性上並不適用 */
div{
  transition: width 2s;
  -moz-transition: width 2s;         /* Firefox 4 */
  -webkit-transition: width 2s;      /* Safari 和 Chrome */
  -o-transition: width 2s;           /* Opera */
}
/* 配合在一塊兒使用的效果就是當鼠標移上去的時候寬度變爲300px，這個過程耗時2秒 */
div:hover{
  width:300px;
}

注意： 當鼠標移出元素時，它會逐漸變回原來的樣式。

多項改變 示例

如需向多個樣式添加過渡效果，請添加多個屬性，由逗號隔開。

/* 同時向寬度、高度和轉換添加過渡效果 */
div{
  transition: width 2s, height 2s, transform 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  -o-transition: width 2s, height 2s,-o-transform 2s;
}

/* 當鼠標移上時寬度和高度都變成200px，同時旋轉180度，每一個屬性變化都耗時2秒 */
div:hover{
  width:200px;
  height:200px;
  transform:rotate(180deg);
  -moz-transform:rotate(180deg);        /* Firefox 4 */
  -webkit-transform:rotate(180deg);     /* Safari and Chrome */
  -o-transform:rotate(180deg);          /* Opera */
}

過渡屬性詳解 詳解

transition 是簡寫屬性，

語法： transition : transition-property | transition-duration | transition-timing-function | transition-delay;

/* 設置在寬度上添加過渡效果，時長爲1秒，過渡效果時間曲線爲linear，等待2秒後開始過渡 */
div{
  transition: width 1s linear 2s;
  -moz-transition: width 1s linear 2s;       /* Firefox 4 */
  -webkit-transition: width 1s linear 2s;    /* Safari and Chrome */
  -o-transition: width 1s linear 2s;         /* Opera */
}

屬性	描述
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property	規定應用過渡的 CSS 屬性的名稱。
transition-duration	定義過渡效果花費的時間。默認是 0。
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。
transition-delay	規定過渡效果什麼時候開始。默認是 0。

8、CSS3 動畫

經過 CSS3能夠建立動畫，這些動畫能夠取代網頁中的畫圖片、Flash 動畫以及 JavaScript。

CSS3 中經過@keyframes 規則來建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式（動畫開始前的樣式）逐漸改成新樣式（須要變到的樣式）的動畫效果。

經過from , to關鍵字設置動畫發生的時間 示例

/* 經過@keyframes 建立動畫 */
@keyframes myfirst{
  from {background: red;}
  to {background: yellow;}
}
/* Firefox */
@-moz-keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}
/* Opera */
@-o-keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}

/*
   將建立的動畫綁定到選擇器，並至少指定如下兩項 CSS3 動畫屬性
   1.指定動畫的名稱；
   2.指定動畫的時長；
*/
div{
  animation: myfirst 5s;
  -moz-animation: myfirst 5s;       /* Firefox */
  -webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
  -o-animation: myfirst 5s;         /* Opera */
}

經過百分比設置動畫發生的時間 示例

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。能夠改變任意多的樣式任意多的次數。能夠用關鍵詞 "from" 和 "to"來設置動畫變化發生的時間，其效果等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。爲了獲得最佳的瀏覽器支持，應該始終定義 0% 和 100% 選擇器。

/* 當動畫爲 25% 及 50% 時改變背景色，而後當動畫 100% 完成時再次改變 */
@keyframes myfirst{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

/* 同時改變背景色和位置 */
@keyframes myfirst{
  0%   {background: red; left:0px; top:0px;}
  25%  {background: yellow; left:200px; top:0px;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0px; top:200px;}
  100% {background: red; left:0px; top:0px;}
}

動畫屬性詳解

animation 是除了 animation-play-state 屬性全部動畫屬性的簡寫屬性。

語法： animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction

/* 應用的動畫爲myfirst，一個動畫週期爲5秒，動畫的速度曲線爲linear，動畫2秒後播放，播放次數爲infinite，即無限循環，動畫下一週期是否逆向播放取值alternate，即逆向播放 */
div{
  animation: myfirst 5s linear 2s infinite alternate;
  /* Firefox: */
  -moz-animation: myfirst 5s linear 2s infinite alternate;
  /* Safari 和 Chrome: */
  -webkit-animation: myfirst 5s linear 2s infinite alternate;
  /* Opera: */
  -o-animation: myfirst 5s linear 2s infinite alternate;
}

屬性	描述
@keyframes	規定動畫。
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name	規定 @keyframes 動畫的名稱。
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。
animation-delay	規定動畫什麼時候開始。默認是 0。
animation-iteration-count	規定動畫被播放的次數。默認是 1。
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode	規定對象動畫時間以外的狀態。

9、CSS3 多列

經過 CSS3夠建立多個列來對文本進行佈局，就像咱們常常看到的報紙的佈局同樣。

CSS3 建立多列 示例

column-count 屬性規定元素應該被分隔的列數。

/* 將div中的文本分爲3列 */
div{
  column-count:3;
  -moz-column-count:3;        /* Firefox */
  -webkit-column-count:3;     /* Safari 和 Chrome */
}

CSS3 規定列之間的間隔 示例

column-gap 屬性規定列之間的間隔。

/* 設置列之間的間隔爲 40 像素 */
div{
  column-gap:40px;
  -moz-column-gap:40px;        /* Firefox */
  -webkit-column-gap:40px;     /* Safari 和 Chrome */
}

CSS3 列規則 示例

column-rule 屬性設置列之間的寬度、樣式和顏色規則。

語法： column-rule : column-rule-width | column-rule-style | column-rule-color

div{
  column-rule:3px outset #ff0000;
  -moz-column-rule:3px outset #ff0000;       /* Firefox */
  -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */
}

屬性	描述
column-count	規定元素應該被分隔的列數。
column-fill	規定如何填充列。
column-gap	規定列之間的間隔。
column-rule	設置全部 column-rule-* 屬性的簡寫屬性。
column-rule-width	規定列之間規則的寬度。
column-rule-style	規定列之間規則的樣式。
column-rule-color	規定列之間規則的顏色。
column-span	規定元素應該橫跨的列數。
column-width	規定列的寬度。
columns	語法 : column-width column-count。

10、CSS3 用戶界面

CSS3 resize 示例

在 CSS3中resize 屬性設置是否可由用戶調整元素尺寸。

/* 設置div能夠由用戶調整大小 */
div{
  resize:both;
  overflow:auto;
}

CSS3 box-sizing 示例

box-sizing 屬性容許您以確切的方式定義適應某個區域的具體內容。

這個屬性沒太懂

/* 規定兩個並排的帶邊框方框 */
div{
  box-sizing:border-box;
  -moz-box-sizing:border-box;        /* Firefox */
  -webkit-box-sizing:border-box;     /* Safari */
  width:50%;
  float:left;
}

CSS3 outline-offset 示例

outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

輪廓與邊框有兩點不一樣：

• 輪廓不佔用空間；

• 輪廓多是非矩形；

/* 規定邊框邊緣以外 15 像素處的輪廓 */
div{
  border:2px solid black;
  outline:2px solid red;
  outline-offset:15px;
}

11、參考資料

w3school CSS3 教程

CSS3 Border-image