CSS3新屬性

CSS3新屬性

CSS即Cascading Style Sheets，中文譯爲層疊樣式表。3表示其版本，那3和1，2有什麼區別呢？

CSS1,CSS2,CSS3區別

• CSS1
  CSS1指CSS（層疊樣式表）的第一個版本，它於1996年12月17日成爲W3C推薦標準，爲哈肯·維姆·萊和伯特·波斯共同設計而成 。該版本中提供了有關文字、顏色、位置和文本屬性等基本信息。
• CSS2
  CSS2是CSS（層疊樣式表）的第二級，W3C組織於1998年推出的技術規範，提供了比CSS1更強的XML和HTML文檔的格式化功能。例如，元素的擴展定位與可視格式化、頁面格式與打印支持和聲音樣式單等。
• CSS3
  CSS3是CSS（層疊樣式表）技術的升級版本，於1999年開始制訂，2001年5月23日W3C完成了CSS3的工做草案，主要包括盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊。
  CSS演進的一個主要變化就是W3C決定將CSS3分紅一系列模塊。瀏覽器廠商按CSS節奏快速創新，所以經過採用模塊方法，CSS3規範裏的元素能以不一樣速度向前發展，由於不一樣的瀏覽器廠商只支持給定特性。但不一樣瀏覽器在不一樣時間支持不一樣特性，這也讓跨瀏覽器開發變得複雜。

CSS3新屬性

CSS3的新特徵有不少，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄佈局、媒體查詢等。

• 邊框特性

CSS3對網頁中的邊框進行了一些改進，主要包括支持圓角邊框、多層邊框、邊框色彩與圖片等。在CSS3中最經常使用的一個改進就是圓角邊框，經過CSS3的屬性能夠快速實現圓角定義，同時還能夠根據實際狀況針對特定角進行圓角定義。

/*圓角邊框*/
div {
  border:2px solid;
  border-radius:25px;
}

/*圖片邊框*/
div {
  border-image:url(border.png) 30 30 round;
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
}

• 多背景圖

CSS3容許使用多個屬性（好比background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一個元素上添加多層背景圖片。該屬性的應用大大改善了以往面對多層次設計須要多層佈局的問題，幫助Web前端開發者在不借助Photoshop的狀況下實現對頁面背景的設計，簡化了背景圖片的維護成本。

/*多圖背景*/
#example1 { 
  background-image: url(img_flwr.gif), url(paper.gif); 
  background-position: right bottom, left top; 
  background-repeat: no-repeat, repeat; 
}

/*或*/
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

• 顏色與透明度

CSS3顏色模塊的引入，實現了製做Web效果時再也不侷限於RGB和十六進制兩種模式。CSS3增長了HSL、HSLA、RGBA幾種新的顏色模式。這幾種顏色模式的提出，在作開發的時候不只能夠設置元素的色彩，還能根據須要輕鬆地設定元素透明度。

• 多列布局與彈性盒模型佈局

CSS3多列布局屬性能夠不使用多個div標籤就能實現多列布局。CSS3中的多列布局模塊描述瞭如何像報紙、雜誌那樣，把一個簡單的區塊拆成多列，並經過相應屬性來實現列數、列寬、各列之間的空白間距。彈性盒模型佈局方便了Web前端開發者根據複雜的前端分辨率進行彈性佈局，輕鬆地實現頁面中的某一區塊在水平、垂直方向對齊，是進行響應式網站開發的一大利器

/*多列布局*/
.newspaper{
  column-count:3;
  column-gap:40px;
  column-rule-style:outset;
  column-rule-color:#ff0000;
  column-rule-width: 1px;
}
h2{
  column-span:all;
}
/*彈性盒子*/
<style> 
.flex-container {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

• 盒子的變形

在CSS2.1中，想讓某個元素變形必需要藉助JavaScript寫大量的代碼實現，在CSS3中加入了變形屬性，該屬性在2D或3D空間裏操做盒子的位置和形狀，來實現例如旋轉、扭曲、縮放或者移位。變形屬性的出現，使Web前端中的元素展現不單單侷限在二維空間，Web前端開發者能夠經過旋轉、扭曲、縮放或者移位等操做實現元素在三維控件上的展現。經過變形元素，web前端中的內容展現更加形象、真實。

/*2D轉換*/
/*移動*/
div{
  transform: translate(50px,100px); 
}
/*旋轉*/
div{
  transform: rotate(30deg);
}
/*改變寬高*/
div{
  transform: scale(2,3);
}
/*傾斜*/
div{
  transform: skew(30deg,20deg);
}
/*使用六個值的矩陣實現轉換*/
div{
  transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
/*3D轉換*/
/*圍繞X軸旋轉*/
div
{
  transform:rotateX(120deg);
}
/*圍繞Y軸旋轉*/
div
{
  transform:rotateY(130deg);
}
/*圍繞Z軸旋轉*/
div
{
  transform:rotateZ(140deg);
}
/*圍繞Z軸旋轉*/
div
{
  transform:rotateZ(140deg);
}
/*改變被轉換元素的位置*/
#div2
{
  transform: rotate(45deg);
  transform-origin:20% 40%;
}
/*讓轉換的子元素保留3D轉換*/
<style>
#div1
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}
#div2{
  padding:40px;
  position: absolute;
  border: 1px solid black;
  background-color: yellow;
  ransform: rotateY(-60deg);
}
</style>
<div id="div1">HELLO
  <div id="div2">YELLOW</div>
</div>
/*透視效果及規定其底部位置*/
div{
  perspective:150;
  perspective-origin: 10% 10%;
}
/*定義元素在不面對屏幕時是否可見*/
div{
  backface-visibility:hidden;/*可見爲visible*/
}

• 過渡與動畫

CSS3的「過渡」（transition）屬性經過設定某種元素在某段時間內的變化實現一些簡單的動畫效果，讓某些效果變得更加具備流線性與平滑性。CSS3的「動畫」（animation）屬性可以實現更復雜的樣式變化以及一些交互效果，而不須要使用任何Flash或JavaScript腳本代碼。過渡與動畫的出現，使CSS在Web前端開發中再也不僅僅侷限於簡單的靜態內容展現，而是經過簡單的方法使頁面元素動了起來，實現了元素從靜到動的變化。

/*過渡*/
div{
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
}
/*或*/
div
{
  transition: width 1s linear 2s;
}
 
/*動畫*/
div{
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
}
@keyframes myfirst{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

• Web字體

CSS3中引入了@font-face，@font-face是連接服務器字體的一種方式，這些嵌入的字體能變成瀏覽器的安全字體，開發人員不用再擔憂用戶沒有這些字體而致使網頁在用戶瀏覽器沒法正常顯示的問題。

/*引入字體*/
@font-face{
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div{
  font-family:myFirstFont;
}

• 媒體查詢

CSS3中引入媒體查詢（mediaqueries），可爲不一樣分辨率的設備定義不一樣的樣式。好比，在可視區域小於480像素時，可能想讓原來在右側的網站側欄顯示在主內容的下邊，以往必須經過JavaScript判斷用戶瀏覽器的分辨率，而後再經過JavaScript修改CSS。CSS3中只須要經過媒體查詢就可實現上述操做 。

/*媒體查詢斷定屏幕可視窗口尺寸*/
body {
  background-color: pink;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

• 陰影

陰影主要分爲兩種：文本陰影（text-shadow）和盒子陰影（box-shadow）。文本陰影在CSS2中已經存在，但沒有獲得普遍的運用（CSS2.1中刪除了）。CSS3延續了這個特性，並進行了新的定義，該屬性提供了一種新的跨瀏覽器解決方案，使文本看起來更加醒目。CSS3中的盒子陰影的引入，可輕易地爲任何元素添加盒子陰影。

/*文本陰影*/
h1{
  text-shadow: 5px 5px 5px #FF0000;
}

/*盒子陰影*/
div{
  box-shadow: 10px 10px 5px #888888;
}