一、當樣式表裏font-size<12px時，中文版chrome瀏覽器裏字體顯示仍爲12px，這時能夠用 html{-webkit-text-size-adjust:none;}javascript
二、-webkit-text-size-adjust放在body上會致使頁面縮放失效css
三、body會繼承定義在html的樣式html
四、用-webkit-text-size-adjust不要定義成可繼承的或全局的java
(三)outline：none(1)在pc端爲a標籤訂義這個樣式的目的是爲了取消ie瀏覽器下點擊a標籤時出現的虛線。ie7及如下瀏覽器還不識別此屬性，須要在a標籤上添加hidefocus="true"(2)input，textarea{outline:none} 取消chrome下默認的文本框聚焦樣式(3)在移動端是不起做用的，想要去除文本框的默認樣式可使用-webkit-appearance，聚焦時候默認樣式的取消是-webkit-tap-highlight-color。看到一些移動端reset文件加了此屬性，實際上是多餘。css3
CSS3那些鮮爲人知的高級屬性
儘管現代瀏覽器已經支持了衆多的CSS3屬性，可是大部分設計師和開發人員貌似依然在關注於一些很「主流」的屬性，如border-radius、box-shadow或者transform等。它們有良好的文檔、很好的測試而且最經常使用到，因此若是你最近在設計網站，你很難能脫離它們。web
可是，隱藏在瀏覽器的大寶庫中是一些高級的、被嚴重低估的屬性，可是它們並無獲得太多的關注。或許它們中的一些應該這樣(被無視)，可是其它的屬性應該獲得更多的承認。最偉大的財富隱藏在Webkit的下面，並且在iPhone、iPad和Android apps的時代，開始瞭解它們會灰常有用。就連Firefox等使用的Gecko引擎，也提供了一些獨特的屬性。在本文中，咱們將看一下不爲人知的CSS 2.1和CSS3屬性以及它們在現代瀏覽器中的支持狀況。算法
說明: 對於每一個屬性，咱們這裏規定：」WebKit」 即指代使用Webkit內核的瀏覽器(Safari、Chrome、iPhone、iPad、Android等)，」Gecko「指代採用Gecko內核的瀏覽器(Firefox等)。而後有的屬性是官方CSS 2.1. 規範的一部分，這意味着更多的瀏覽器甚至一些古老的瀏覽器也會支持它們。最後，一個CSS3 的標籤標明遵照這個標準，被最新的瀏覽器版本——好比Firefox 四、Chrome 十、Safari 五、Opera 11.10以及IE9支持的屬性。chrome
WebKit特有屬性
-webkit-mask
這個屬性是至關強大的，因此詳細的介紹超出了本文的範疇，它很是值得深刻研究，由於它能夠在實際應用中爲你省掉不少時間。canvas
-webkit-mask讓爲一個元素添加蒙板成爲可能，從而你能夠建立任意形狀的花樣。蒙板能夠是CSS3漸變或者半透明的PNG圖片。蒙板元素的alpha值爲0的時候會覆蓋下面的元素，爲1的時候會徹底顯示下面的內容。相關的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，嚴重依賴來自於background中的語法。更多信息請查看webkit的博客和下面的連接。瀏覽器
示例
圖片蒙板:
1 2 3 4 |
.element{
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
} |
示例
漸變蒙板:
1 2 3 4 |
.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
} |
擴展閱讀: Safari Developer Library
-webkit-text-stroke
CSS邊框的一個不足就是隻有矩形的元素才能使用。-webkit-text-stroke能夠爲文字添加邊框。它不但能夠設置文字邊框的寬度，也能設置其顏色。並且，配合使用color: transparent屬性，你還能夠建立鏤空的字體！
示例
爲全部的<h1>標題設定一個2px寬的藍色邊框:
1 |
h1 {-webkit-text-stroke: 2px blue} |
另外一個特性是，經過設定1px的透明邊框，可讓文字變得平滑:
1 |
h2 {-webkit-text-stroke: 1px transparent} |
建立紅色鏤空字體：
1 2 3 4 |
h3 {
color: transparent;
-webkit-text-stroke: 4px red;
} |
擴展閱讀: Safari Developer Library
-webkit-nbsp-mode
換行有時是很棘手的事情：有時你但願文字在適當的地方斷行(而不是折行)，有時你又不想這樣。一個能控制這個的屬性就是-webkit-nbsp-mode，它讓你能夠改變 空白符的行爲，強制文字在它被用到的地方斷行。經過設置值爲space便可實現。
擴展閱讀: Safari Developer Library
-webkit-tap-highlight-color
這個屬性只用於iOS (iPhone和iPad)。當你點擊一個連接或者經過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。要重設這個表現，你能夠設置-webkit-tap-highlight-color爲任何顏色。
想要禁用這個高亮，設置顏色的alpha值爲0便可。
示例
設置高亮色爲50%透明的紅色:
1 |
-webkit-tap-highlight-color: rgba(255,0,0,0.5); |
瀏覽器支持: 只有iOS(iPhone和iPad).
擴展閱讀: Safari Developer Library
zoom: reset
一般來講，zoom是一個IE專用的屬性。可是webkit也開始支持它了，並且使用值reset，webkit能夠實現不錯的效果(有趣的是，IE不支持這個值)。它讓你重設掉瀏覽器中正常的縮放行爲——若是某個元素被聲明瞭zoom:reset，頁面上的其它元素在用戶放大頁面的時候都會跟着放大。
注：其實，咱們經常使用來禁用chrome強制字體大小的時候用到的-webkit-text-size-adjust:none;也是能夠實現相似的效果，不一樣的是，設置該屬性的元素內的文字不會被放大/縮小，可是頁面上的其它元素則會變化——神飛
擴展閱讀: Safari Developer Library
-webkit-margin-collapse
這個屬性屬於限制級的，可是它仍是很是值得關注。一般，兩個相鄰的元素的margin會摺疊起來(collapse)。這意味着第一個元素的底部的邊距和第二個元素的頭部邊距會被合併到一塊兒。
最多見的例子就是兩個相鄰的<p>元素會共享他們的margin值。想要控制這個表現，咱們可使用-webkit-margin-collapse及其分拆後的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等屬性。默認值是collapse，值separate則中止共享margin值，也就是說，第一個元素的底部邊距和第二個元素的頭部邊距會正常疊加。
擴展閱讀: Safari Developer Library
-webkit-box-reflect
你還記得幾乎每一個網站都把他們的網站logo或者頭部的文字作成倒影的那個年代嗎？謝天謝地，那個年代已通過去了，可是若是你要在一些按鈕、導航、或者其餘UI元素上更好的使用這個技術，-webkit-box-reflect是更好的選擇。
這個屬性接受above、below、left和right四個關鍵詞，它們設置倒影的方向，它們和一個設置元素和它的倒影建的距離的數字一塊兒使用。同時，蒙板圖片也是一樣支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影會自動生成並對佈局沒有影響。下面的元素只用了CSS，第二個按鈕用了-webkit-box-reflect屬性。
示例
這個倒影會出如今它的父元素的下面並有5px的間距:
1 |
-webkit-box-reflect: below 5px; |
這個倒影會投射到元素的右邊，沒有間距。而後，一個蒙板將會被應用(url(mask.png)):
1 |
-webkit-box-reflect: right 0 url(mask.png); |
擴展閱讀: Safari Developer Library
-webkit-marquee
另外一個屬性讓咱們回到美好的從前：那個遍地marquee(跑馬燈)的年代。有趣的是這個已經被遺棄的標籤反而在如今變的頗有用，好比咱們在比較小的手機屏幕上切換內容，若是不斷行的話文字將不能徹底顯示。
ozPDA建立的這個天氣的應用很好的使用了它。 (若是你木有看到變換的文字，能夠嘗試換一個城市來體驗。須要使用WebKit內核瀏覽器)
示例
1 2 3 4 5 6 7 8 |
.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
} |
要讓marquee工做須要一些前提條件。首先，white-space必須設置爲nowrap，這樣才能讓文字不自動換行，其次，overflow必須設置爲-webkit-marquee，寬度也要設置爲比文字實際長度小的數值。
剩下的屬性確保文字從左邊滾動到右邊(-webkit-marquee-direction)、來回移動(-webkit-marquee-style)以及以比較低的速度移動(-webkit-marquee-speed)。其它的屬性有-webkit-marquee-repetition，用來定義marquee重複的次數，-webkit-marquee-increment, 定義每次遞增的速度變化。
注：雖然HTML的marquee標籤在XHTML中被拋棄了，可是各瀏覽器仍是支持的，可是有一個問題就是，marquee標籤可能會佔用比較大的cpu，大貓對其進行了深刻的研究，結論是marquee的速度不能太快，而webkit用-webkit-marquee屬性是最好的——神飛。
擴展閱讀: Safari Developer Library
Gecko特有屬性
font-size-adjust
這個有用的CSS3屬性目前只有Firefox支持。咱們能夠用它來設定指定元素的文字大小(font-size)應該相對於小寫字母的高度(x-height)而不是大寫字母的高度(cap height)。好比，Verdana比同型號的Times字體更清晰，它有着更矮的x-height。爲了彌補這個缺陷，咱們能夠用font-size-adjust屬性來糾正後者。
該屬性在擁有不一樣的x-height的字體上很是有用。即使你在當心的使用小號字體，在問題出現時font-size-adjust也能提供解決方案。
示例
若是因爲某種緣由用戶的電腦上沒有安裝Verdana，那麼Arial就會被修正，從而和Verdana有相同的長寬比(0.58)。
1 2 3 4 5 |
p {
font-family:Verdana, Arial, sans-serif;
font-size: 12px;
font-size-adjust: 0.58;
} |
瀏覽器支持: Gecko.
擴展閱讀: Mozilla Developer Network
image-rendering
n年前，圖片並不會被按照其原始大小顯示，而是被設計師給縮放掉。取決於縮放的大小和上下文，圖片可能會在瀏覽器中展示的不太好或者乾脆就是錯掉了的。如今，瀏覽器有了更好的算法來顯示縮放的圖片，不過，在你的圖片被縮放後徹底的控制其表現也是件很讚的事情。
若是你的圖片有比較銳的線條並但願他們在縮放後保持它，這個Gecko私有屬性就顯得特別有用。相關的值是-moz-crisp-edges。一樣的算法也用在optimizeSpeed，而auto 和optimizeQuality 定義爲標準行爲(用可行的最佳質量來縮放元素)。 image-rendering 屬性一樣能夠用於<video> 和<canvas>元素，和用於背景圖片同樣。這是個CSS3 標準屬性，可是目前只有Firefox支持。
值得注意的是，-ms-interpolation-mode: bicubic，儘管它是個IE專有屬性。然而，它讓Internet Explorer 7 在縮放圖片後將其渲染爲比較高的質量。因爲這個瀏覽器默認處理的很爛，因此這個屬性可能會頗有用。
瀏覽器支持: Gecko.
擴展閱讀: Mozilla Developer Network
-moz-border-top-colors
這個屬性能夠歸類爲’養眼’。它讓你能夠在border寬度大於1px的時候爲其設置不一樣的邊框顏色。固然-moz-border-bottom-colors, -moz-border-left-colors 和-moz-border-right-colors也是可用的。
不爽的是，沒有一個簡寫的-moz-border-colors 縮寫，因此每一個邊框都要分開設置。同時，border-width要和給到的顏色的數量保持一致，不然，最後的那個顏色值會填充到剩下的寬度。
示例
這個例子中，元素的左右兩邊邊框會是標準的橙色，上下則有種相似漸變的顏色——紅黃藍三色。
1 2 3 4 5 |
div {
border: 3px solid orange;
-moz-border-top-colors: red yellow blue;
-moz-border-bottom-colors: red yellow blue;
} |
瀏覽器支持: Gecko.
擴展閱讀: Mozilla Developer Network
混合屬性
-webkit-user-select 和 -moz-user-select
或許你經常不但願用戶在你的網站上選擇文本，不管是不是出於版權的緣由。一般你們會有js來實現，另外一個方案就是，將-webkit-user-select 和-moz-user-select 的值設爲none。
請謹慎使用這個屬性：由於大部分用戶是來查看信息的，他們能夠複製並存儲下來以備未來之用，因此這種方法既無用也無效。若是你禁用了複製粘貼功能，用戶仍是能夠經過查看源文件來獲取到他們想要的內容。搞不懂這個屬性爲何會被webkit和gecko支持。
瀏覽器支持: WebKit, Gecko.
擴展閱讀: Safari Developer Library, Mozilla Developer Network
-webkit-appearance 和 -moz-appearance
你曾經想過將一張圖片假裝成單選按鈕麼？或者，一個輸入框看起來像一個複選框？那麼如今appearance 出現了。即使你並不想要讓一個連接看起來老是像個按鈕，下面這個例子也可讓你瞭解到，只要你願意就能夠作到的：
示例
1 2 3 4 |
a {
-webkit-appearance: button;
-moz-appearance: button;
} |
瀏覽器支持: WebKit, Gecko.
擴展閱讀: Safari Developer Library, Mozilla Developer Network, Mozilla Developer Network,CSS3 appearance簡介
text-align: -moz-center/-webkit-center
這是一個屬性（或者精確來講，是個「屬性值」）的存在很讓人驚喜啊。要讓一個塊級元素居中，你們一般將其設置爲margin:0 auto。可是，如今你也能夠將元素的容器的text-align屬性設置爲-moz-center 和 -webkit-center。相應的，你也能夠經過設置-moz-left、-webkit-left或-moz-right、-webkit-right將元素居左或者居右。
瀏覽器支持: WebKit, Gecko.
擴展閱讀: Safari Developer Library
CSS 2.1屬性
counter-increment
你是否常常但願你可讓一個有序列表或者一篇文章的全部標題自動編號？不幸的是，目前還沒有有CSS3屬性支持。可是在CSS 2.1中，counter-increment 提供了一個解決方案。這就意味着它已經出現好些年了，並且在IE8中就已經支持了。
配合:before 僞元素和content 屬性，counter-increment能夠爲全部的HTML標籤添加自動的編號。即使是嵌套的編碼也是支持的。
示例
要給標題編碼，先將計算器重設一下:
1 |
body {counter-reset: thecounter} |
下面的樣式讓每個<h1>標題都有一個」Section」的前綴，而後其後面的數字自動的遞增1(這是默認的，能夠省略掉)，這裏thecounter是計算器的名稱:
1 2 3 4 |
.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
} |
示例
對於一個嵌套編碼的列表，重設計數器，而後關掉<ol>的自動編碼，由於它是無嵌套的:
1 2 3 4 |
ol {
counter-reset: section;
list-style-type: none;
} |
而後，每一個<li>設置爲自動編號，分割符是一個點(.)，後面跟着一個空格
1 2 3 4 |
li:before {
counter-increment: section;
content: counters(section,".")"";
} |
HTML代碼：
1 2 3 4 5 6 7 8 9 10 |
<ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 1.1 --> <li>item</li> <!-- 1.2 --> </ol> </li> <li>item</li> <!-- 3 --> <ol> |
瀏覽器支持: CSS 2.1.，全部的現代瀏覽器，IE 7+.
擴展閱讀: W3C，CSS content, counter-increment 和 counter-reset詳解
quotes
你會由於你的CMS不知道如何正確轉換引用符號而糾結麼？那麼開始使用quotes屬性吧。這樣你就能夠自定義任何符號了。而後你就能夠用:before和:after僞元素爲任何指望的元素指定引號了，悲催的是，webkit瀏覽器不支持這個屬性——經測試，chrome 11已經開始支持這個屬性了（以前的版本沒有測試）。
示例
前面的兩個符號決定第一級引用內容的引號，後面的兩個用於二級引用，以此類推：
1 2 3 |
q {
quotes: '«' '»' "‹" "›";
} |
下面兩行用於爲選定元素指定引號:
1 2 |
q:before {content: open-quote}
q:after {content: close-quote} |
這樣，<p><q>This is a very <q>nice</q> quote.</q></p>看起來將會是醬紫的：
«This is a very ‹nice› quote.»
瀏覽器支持: CSS 2.1.,除了WebKit，IE 7和IE6的全部現代瀏覽器。不過chrome是支持的。。。
擴展閱讀: W3C
問題：要直接的添加符號，CSS文檔必需要設置爲UTF-8嗎？這是一個很糾結的問題。遺憾的是，我不能給出一個明確的答案。個人經驗是，沒必要要設置什麼特定的字符集，而後utf-8字符集可能會出錯，由於它顯示錯掉的字符(好比」»」)。而是用iso-8859-1 字符集，一切就都是正常的。
W3C這樣描述：」因爲上個例子中由’quotes’定義的引號方便的定位在電腦鍵盤上，高質量的字符則須要不一樣的10646字符集。」
你或許據說過可是沒有記住的CSS3屬性
接近尾聲，讓咱們重溫一些不太流行的以及不像border-radius和box-shadow那樣被普遍需求的CSS3屬性。
text-overflow
或許你會經常遇到這個問題：某個容器對於其內的文字來講過小了，而後你不得不用javascript來截斷字符串並添加」…」符號以免文字溢出。
忘掉它吧！採用CSS3和text-overflow: ellipsis，若是文字比它的容器的寬度要長的話，你就能夠強制文字以」…」結束它。惟一的要求是設置overflow:hidden。不幸的是，Firefox不支持這個屬性，可是貌似在最近的版本中將會提供支持。
示例
1 2 3 4 |
div {
width: 100px;
text-overflow: ellipsis;
} |
瀏覽器支持: CSS 3，全部瀏覽器的最新版本，除了Firefox，IE從IE6開始支持，聽說Firefox到6.0也會提供支持的——但願如此吧。
擴展閱讀: W3C
word-wrap
當文字在一個比較窄的容器中時，它的某個部分可能會由於太長而不能正確的換行。好比連接就經常引發問題。若是你不想用overflow: hidden隱藏溢出的文字，那麼你就能夠設置 word-wrap 爲break-word，它可讓字符串在到達容器的寬度限制時換行。
示例
1 2 3 4 |
div {
width: 50px;
word-wrap: break-word;
} |
瀏覽器支持: CSS 3，全部現代瀏覽器。
擴展閱讀: W3C
resize
若是你在使用Firefox或Chrome，那麼你確定注意到了文本框的右下角默認有個小的手柄，它可讓你調整它們的大小。這個標準的行爲由CSS3 屬性 resize: both實現。
可是它並不只限於textarea。它能夠用於全部的HTML元素。horizontal 和 vertical 值用於控制調整水平方向仍是垂直方向。
請注意：對於display:block元素，若是設置了overflow:visible，resize屬性將會無效(這一點原文描述不詳——by 神飛)。
瀏覽器支持: CSS3, 除了Opera和IE覺得的其它最新的瀏覽器。
擴展閱讀: Safari Developer Library
background-attachment
當你爲一個設置了overflow:auto的元素指定背景圖片的時候，當內容太多而出現滾動條後，拖動滾動條就會發現背景圖片的位置是固定的，而不是隨着滾動條移動。若是你想要背景圖片隨着內容而滾動，能夠設置background-attachment:local。
瀏覽器支持: CSS 3，除了Firefox之外的全部現代瀏覽器，Firefox是支持background-attachment屬性的，只是不支持local值.
擴展閱讀: W3C
text-rendering
隨着愈來愈多的網站開始用@font-face來渲染文字，易讀性開始被關注了。小號字體上，文字會更容易出現。因爲目前尚未CSS屬性控制顯示在線字體的微妙細節，你能夠利用text-rendering來啓用kerning 和 ligatures。
Gecko 和WebKit 瀏覽器處理這個屬性的方式很不同。前者默認啓用這個特性，然後者，你須要將其設置爲optimizeLegibility。
瀏覽器支持: CSS3, 全部WebKit 和Firefox瀏覽器.
擴展閱讀: W3C
transform: rotateX/transform: rotateY
若是你已經開始使用CSS3，那麼你可能會比較熟悉transform: rotate()，這個在z軸上旋轉元素的屬性。
可是你是否也知道，它也能夠更深刻的旋轉的(好比，圍繞x軸和y軸)？ 這些變形結合-webkit-backface-visibility: hidden會更合適。
示例
若是你鼠標通過這個元素，它將會旋轉180°，倒轉過來:
1 2 3 |
div:hover {
transform: rotateY(180deg);
} |
小技巧:若是隻是映射一個元素，你能夠設置transform爲rotateX(180deg) (對應rotateY)或者設置transform 爲scaleX(-1) (對應scaleY).
瀏覽器支持: CSS3, WebKit、firefox、Opera以及IE9
擴展閱讀: W3C，你須要知道的CSS3 動畫技術