CSS3

http://caniuse.com/
1、私有前綴及其用法
.round{
-khtml-border-radius: 10px; / Konqueror /
-rim-border-radius: 10px; / RIM /
-ms-border-radius: 10px; / Microsoft /
-o-border-radius: 10px; / Opera /
-moz-border-radius: 10px; / Mozilla (如 Firefox) /
-webkit-border-radius: 10px; / Webkit (如 Safari 和 Chrome) /
border-radius: 10px; / W3C /
}

2、快速而有效的 CSS3 技巧
通過相鄰兄弟選擇器 將 div下一個p更改爲 紅色字體
div.s1+p
div+p
通過通用兄弟選擇器 將 div後所有的p 背景改爲 #ccc色
div~p

△CSS3 多欄佈局
column-width: 12em;或column-count: 4;
#main {
column-gap: 2em;
column-rule: thin dotted #999;
column-width: 12em;
}

△文字換行
word-wrap: break-word;

△CSS3 屬性選擇器
img[alt="atwi_oscar"] {
border: 3px dashed #e15f5f;
}
匹配開頭：Element[attribute^="value"]
匹配包含內容：Element[attribute*="value"]
匹配結尾：Element[attribute$="value"]

屬性] : 具備 指定屬性 的所有元素全部匹配出來
元素[屬性] : 匹配具備 屬性的 指定元素
p[id] : 匹配具備id屬性的p元素
div[class] :
元素[屬性1][屬性2] :
p[id][class] : 匹配出所有即具備id屬性，又具備class屬性的p元素
元素[屬性=值] :
input[type="text"] : 匹配type的值爲text的input元素
元素[屬性~=值] :
input[class ~= second] :
<input class="first second" />
<input class="myseconddiv" />

    ~= : 包含指定的數據（獨立）
    =  : 只有指定的數據
   元素[屬性^=值] : 匹配指定屬性以指定值開始的指定元素
      p[class^=f] : 匹配class以f開始的p元素
  <p class="first"></p>可以匹配
  <p class="fast"></p>可以匹配
  <p class="second"></p>不能匹配
   元素[屬性*=值] : 屬性包含值元素
      p[class*="valid"];
  <p class="myvalid"></p>
   元素[屬性$=值] : 匹配屬性以指定值結束的元素
   元素[屬性!=值] : 匹配屬性不等於具體值得元素

△CSS3 結構僞類
① :last-child 選擇器
② :nth-child 選擇器
:nth-child(even)
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:nth-child(3n+1) ——這樣會從第一個元素開始，然後每三個元素選一個
③ :not() 否定選擇器 /nav ul li:not(.class) a { color: #fe0208; }/

△對僞元素的修正
p::first-line
p::first-letter

△自定義網頁字體
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-
opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

△新的 CSS3 顏色格式和透明度
RGBA
HSLA：HSL模式基於一個 360°的色相環，H代表色相，60°時爲×××，120°時爲綠色，180°時爲青色，240°時爲藍色，300°時爲洋紅色，360°時爲紅色。

3、文字陰影
△HEX、HSL 或 RGB 顏色都可以
text-shadow: 4px 4px 0px #404442;
text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);
text-shadow: 4px 4px 0px rgba(64, 68, 66, 0.4);

△px、em 或 rem 都行
△製作浮雕文字陰影效果：text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);
△多重文字陰影：text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;

4、盒陰影
box-shadow: 0px 3px 5px #444444;

△內陰影：box-shadow:inset 0 0 40px #000000;
△多重陰影

5、背景漸變
△線性漸變 background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
△徑向背景漸變 background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);
? closest-side ：（漸變形狀是圓形時）以距離中心點最近的一邊爲漸變半徑，或者（漸變形狀是橢圓形時）以距離中心點最近的水平或垂直邊爲漸變半徑。
? closest-corner ：以距離中心點最近的一角爲漸變半徑。
? farthest-side ：和 closest-side 正好相反，（漸變形狀是圓形時）以距離中心點最遠的一邊爲漸變半徑，或者（漸變形狀是橢圓形時）以距離中心點最遠的水平或垂直邊爲漸變半徑。
? farthest-corner ：以距離中心點最遠的一角爲漸變半徑。
? cover ：和 farthest-corner 完全一樣。
? contain ：和 closest-side 完全一樣。
△重複漸變
background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
background: repeating-radial-gradient(2px 2px, ellipse,
hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px,
hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);
△背景漸變圖案
body {
background-color:white;
background-image:
radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,
hsla(0, 0%, 87%, 0.31) 4px, transparent 5px,
transparent 20px, hsla(0, 0%, 87%, 0.31) 21px,
hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,
transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}
CSS 高手 Lea Verou 收集了一系列 CSS3 背景漸變圖案，具體請見 http://lea.verou.me/css3patterns/

6、多重背景圖片
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png') left bottom, black;

△背景圖片大小 background-size: 100% 50%, 300px 400px, auto;
? auto ：使用圖片的原始大小；
? cover ：按照原始圖片的長寬比縮放圖片以填充整個元素區域；
? contain ：按照原始圖片的長寬比縮放圖片以使其較長的一邊適應元素大小。
△背景圖片位置

7、可縮放圖標：響應式設計中的完美選擇
△請見 http://fico.lensco.be/

CSS3 過渡、變形和動畫

1、過渡 transition: all 1s ease 0s;
△transition-property ：要過渡的 CSS 屬性名稱（比如 background-color 、△text-shadow 或者 all ，使用 all 則過渡會被應用到每一個可能的 CSS屬性上）；
△transition-duration ：定義過渡效果持續的時間（時間單位爲秒，比如 .3s 、 2s或 1.5s ）；
△transition-timing-function ：定義過渡期間速度如何變化（比如 ease 、 linear 、ease-in 、 ease-out 、 ease-in-out 或 cubic-bezier ）；
△transition-delay ：可選，用於定義過渡開始前的延遲時間。相反，將該值設置爲一個負數，可以讓過渡效果立即開始，但過渡旅程則會從半路開始。

• {
  transition: all 1s;
  }

2、變形
? scale ：用來縮放元素（放大或縮小） transform: scale(1.7);
? translate ：在屏幕上移動元素（上下左右四個方向）transform: translate(40px, 0px);
? rotate ：按照一定角度旋轉元素（單位爲度） transform: rotate(90deg)
? skew ：沿 X和 Y軸對元素進行斜切 transform: skew(10deg, 2deg);
? matrix ：允許你以像素精度來控制變形效果 transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
矩陣變形工具（matrix）http://www.useragentman.com/matrix/
? transform-origin：移動變形的中心點 transform: rotate(45deg);transform-origin: 20% 20%;

3、3D 變形
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="img/goonies.jpg" alt="The Goonies" />
</div>
<div class="face back"><h5>HOT!</h5></div>
</div>
</section>
<style>
.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 800;①
float: left;
margin-right: 2%;
}
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;②
-webkit-transition: 1s;
}
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);③
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;④
}
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);⑤
background: #3b3b3b;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 100%);
padding: 15%;
}
</style>
①-webkit-perspective: 200; 在父級元素上設置透視（透視聲明只會應用到其第一個子元素上）：透視的值越大，就表示你的視點與 3D場景之間的景深越大
②-webkit-transform-style: preserve-3d; （爲了延續父元素的透視） 這樣可以設置一個 3D場景
③-webkit-transform: rotateY(180deg); 當鼠標懸停在 .Qcontainer 模塊上時，我們給 .film 這個 div添加一個翻轉效果
④-webkit-backface-visibility: hidden; 用來處理當海報翻轉之後隱藏在其背面內容
⑤-webkit-transform: rotateY(180deg); 不加這句的話， .back 這個 div就會顯示在正面海報之上

爲非Webkit核心瀏覽器提供一個合理的降級方案：
.front {z-index: 5;}
.Qcontainer:hover .front {z-index: 0;}
.front {z-index: 5;}
.Qcontainer:hover .front {z-index: 0;}

4、CSS3 動畫效果
@keyframes warning { /定義了一個 @keyframes （關鍵幀）聲明
0%{text-shadow:0px 0px 4px #000;}
50%{text-shadow:0 0 40px #000;}
100%{text-shadow:0 0 4px #000;}
}
.back h5{font-size:4em;text-align:center;animation: warning 1.5s infinite ease-in;} /在動畫屬性中引用它

animation-name: warning;
animation-duration: 1.5s;
animation-timing-function: ease-in-out; /調速函數
animation-iteration-count: infinite; /infinite 讓動畫連續循環播放
animation-play-state: running; /控制動畫的播放和暫停
animation-delay: 0s; /動畫開始前的延時
animation-fill-mode: none;

用 HTML5 和 CSS3 征服表單

1、HTML5 表單
placeholder
required
autofocus
autocomplete="off"
list（及對應的 datalist 元素）
email
number
url
tel
search
pattern
color
date
month
week
time
datetime 和 datetime-local
range

2、使用 CSS3 美化 HTML5 表單
input:not([type="range"]), textarea, select{/樣式/}
針對表單的 CSS3 僞類選擇器
input:required ：選擇必填表單域；
input:focus:invalid ：選擇當前聚焦的且含有非法輸入值的表單域；
input:focus:valid ：選擇當前聚焦的且含有合法輸入值的表單域。

解決跨瀏覽器問題

漸進增強與優雅降級
Modernizr是一個用於檢測瀏覽器功能的開源JavaScript庫