盡 管現代浏覽器已經支援了衆多的CSS3屬性，但是大部分設計師和開發人員貌似依然在關注于一些很“主流”的屬性，如border-radius、box- shadow或者transform等。它們有良好的文檔、很好的測試并且最常用到，是以如果你最近在設計網站，你很難能脫離它們。
但 是，隐藏在浏覽器的大寶庫中是一些進階的、被嚴重低估的屬性，但是它們并沒有得到太多的關注。或許它們中的一些應該這樣(被無視)，但是其它的屬性應該得 到更多的認可。最偉大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的時代，開始了解它們會灰常有用。就連Firefox等使用的Gecko引擎，也提供了一些獨特的屬性。在本文中，我們将看一下鮮為人知的CSS 2.1和CSS3屬性以及它們在現代浏覽器中的支援情況。
這個屬性是相當強大的，是以詳細的介紹超出了本文的範疇，它非常值得深入研究，因為它可以在實際應用中為你省掉很多時間。
示例
圖檔蒙闆:
漸變蒙闆:
CSS邊框的一個不足就是隻有矩形的元素才能使用。-webkit-text-stroke可以為文字添加邊框。它不但可以設定文字邊框的寬度，也能設定其顔色。而且，配合使用color: transparent屬性，你還可以建立镂空的字型！
為所有的<h1>标題設定一個2px寬的藍色邊框:
另一個特性是，通過設定1px的透明邊框，可以讓文字變得平滑:
建立紅色镂空字型：
換 行有時是很棘手的事情：有時你希望文字在适當的地方斷行(而不是折行)，有時你又不想這樣。一個能控制這個的屬性就是-webkit-nbsp- mode，它讓你可以改變&nbsp;空白符的行為，強制文字在它被用到的地方斷行。通過設定值為space即可實作。
這個屬性隻用于iOS (iPhone和iPad)。當你點選一個連結或者通過Javascript定義的可點選元素的時候，它就會出現一個半透明的灰色背景。要重設這個表現，你可以設定-webkit-tap-highlight-color為任何顔色。
想要禁用這個高亮，設定顔色的alpha值為0即可。
設定高亮色為50%透明的紅色:
浏覽器支援: 隻有iOS(iPhone和iPad).
通常來說，zoom是一個IE專用的屬性。但是webkit也開始支援它了，而且使用值reset，webkit可以實作不錯的效果(有趣的是，IE不支援這個值)。它讓你重設掉浏覽器中正常的縮放行為——如果某個元素被聲明了zoom:reset，頁面上的其它元素在使用者放大頁面的時候都會跟着放大。
注：其實，我們常用來禁用chrome強制字型大小的時候用到的-webkit-text-size-adjust:none;也是可以實作類似的效果，不同的是，設定該屬性的元素内的文字不會被放大/縮小，但是頁面上的其它元素則會變化——神飛
這個屬性屬于限制級的，但是它還是非常值得關注。通常，兩個相鄰的元素的margin會折疊起來(collapse)。這意味着第一個元素的底部的邊距和第二個元素的頭部邊距會被合并到一起。
最 常見的例子就是兩個相鄰的<p>元素會共享他們的margin值。想要控制這個表現，我們可以使用-webkit-margin- collapse及其分拆後的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse 等屬性。預設值是collapse，值separate則停止共享margin值，也就是說，第一個元素的底部邊距和第二個元素的頭部邊距會正常疊加。
你還記得幾乎每個網站都把他們的網站logo或者頭部的文字做成倒影的那個年代嗎？謝天謝地，那個年代已經過去了，但是如果你要在一些按鈕、導航、或者其他UI元素上更好的使用這個技術，-webkit-box-reflect是更好的選擇。
這個屬性接受above、below、left和right四個關鍵詞，它們設定倒影的方向，它們和一個設定元素和它的倒影建的距離的數字一起使用。同時，蒙闆圖檔也是同樣支援的(看上面的-webkit-mask部分，不要搞混了哈)。倒影會自動生成并對布局沒有影響。下面的元素隻用了CSS，第二個按鈕用了-webkit-box-reflect屬性。
這個倒影會出現在它的父元素的下面并有5px的間距:
這個倒影會投射到元素的右邊，沒有間距。然後，一個蒙闆将會被應用(url(mask.png)):
另一個屬性讓我們回到美好的從前：那個遍地marquee(跑馬燈)的年代。有趣的是這個已經被遺棄的标簽反而在現在變的很有用，比如我們在比較小的手機螢幕上切換内容，如果不斷行的話文字将不能完全顯示。
要讓marquee工作需要一些前提條件。首先，white-space必須設定為nowrap，這樣才能讓文字不自動換行，其次，overflow必須設定為-webkit-marquee，寬度也要設定為比文字實際長度小的數值。
剩 下的屬性確定文字從左邊滾動到右邊(-webkit-marquee-direction)、來回移動(-webkit-marquee-style)以 及以比較低的速度移動(-webkit-marquee-speed)。其它的屬性有-webkit-marquee-repetition，用來定義 marquee重複的次數，-webkit-marquee-increment, 定義每次遞增的速度變化。
這 個有用的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)。
浏覽器支援: Gecko.
n年前，圖檔并不會被按照其原始大小顯示，而是被設計師給縮放掉。取決于縮放的大小和上下文，圖檔可能會在浏覽器中展現的不太好或者幹脆就是錯掉了的。現在，浏覽器有了更好的算法來顯示縮放的圖檔，不過，在你的圖檔被縮放後完全的控制其表現也是件很贊的事情。
如 果你的圖檔有比較銳的線條并希望他們在縮放後保持它，這個Gecko私有屬性就顯得特别有用。相關的值是-moz-crisp-edges。同樣的算法也 用在optimizeSpeed，而auto 和optimizeQuality 定義為标準行為(用可行的最佳品質來縮放元素)。 image-rendering 屬性同樣可以用于<video> 和<canvas>元素，和用于背景圖檔一樣。這是個CSS3 标準屬性，但是目前隻有Firefox支援。
值得注意的是，-ms-interpolation-mode: bicubic，盡管它是個IE專有屬性。然而，它讓Internet Explorer 7 在縮放圖檔後将其渲染為比較高的品質。由于這個浏覽器預設處理的很爛，是以這個屬性可能會很有用。
這 個屬性可以歸類為’養眼’。它讓你可以在border寬度大于1px的時候為其設定不同的邊框顔色。當然-moz-border-bottom- colors, -moz-border-left-colors 和-moz-border-right-colors也是可用的。
不爽的是，沒有一個簡寫的-moz-border-colors 縮寫，是以每個邊框都要分開設定。同時，border-width要和給到的顔色的數量保持一緻，否則，最後的那個顔色值會填充到剩下的寬度。
這個例子中，元素的左右兩邊邊框會是标準的橙色，上下則有種類似漸變的顔色——紅黃藍三色。
或許你常常不希望使用者在你的網站上選擇文本，無論是否是出于版權的原因。通常大家會有js來實作，另一個方案就是，将-webkit-user-select 和-moz-user-select 的值設為none。
請謹慎使用這個屬性：因為大部分使用者是來檢視資訊的，他們可以複制并存儲下來以備将來之用，是以這種方法既無用也無效。如果你禁用了複制粘貼功能，使用者還是可以通過檢視源檔案來擷取到他們想要的内容。搞不懂這個屬性為什麼會被webkit和gecko支援。
浏覽器支援: WebKit, Gecko.
你曾經想過将一張圖檔僞裝成單選按鈕麼？或者，一個輸入框看起來像一個複選框？那麼現在appearance 出現了。即便你并不想要讓一個連結看起來總是像個按鈕，下面這個例子也可以讓你了解到，隻要你願意就可以做到的：
這 是一個屬性（或者精确來說，是個“屬性值”）的存在很讓人驚喜啊。要讓一個塊級元素居中，大家通常将其設定為margin:0 auto。但是，現在你也可以将元素的容器的text-align屬性設定為-moz-center 和 -webkit-center。相應的，你也可以通過設定-moz-left、-webkit-left或-moz-right、-webkit- right将元素居左或者居右。
你是否經常希望你可以讓一個有序清單或者一篇文章的所有标題自動編号？不幸的是，目前尚未有CSS3屬性支援。但是在CSS 2.1中，counter-increment 提供了一個解決方案。這就意味着它已經出現好些年了，而且在IE8中就已經支援了。
配合:before 僞元素和content 屬性，counter-increment可以為所有的HTML标簽添加自動的編号。即便是嵌套的編碼也是支援的。
要給标題編碼，先将電腦重設一下:
下面的樣式讓每一個<h1>标題都有一個”Section”的字首，然後其後面的數字自動的遞增1(這是預設的，可以省略掉)，這裡thecounter是電腦的名稱:
對于一個嵌套編碼的清單，重設計數器，然後關掉<ol>的自動編碼，因為它是無嵌套的:
然後，每個<li>設定為自動編号，分割符是一個點(.)，後面跟着一個空格
HTML代碼：
浏覽器支援: CSS 2.1.，所有的現代浏覽器，IE 7+.
你 會因為你的CMS不知道如何正确轉換引用符号而糾結麼？那麼開始使用quotes屬性吧。這樣你就可以自定義任何符号了。然後你就可以用:before 和:after僞元素為任何期望的元素指定引号了，悲催的是，webkit浏覽器不支援這個屬性——經測試，chrome 11已經開始支援這個屬性了（之前的版本沒有測試）。
前面的兩個符号決定第一級引用内容的引号，後面的兩個用于二級引用，以此類推：
下面兩行用于為標明元素指定引号:
這樣，<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是支援的。。。
問題：要
直接的添加符号，CSS文檔必須要設定為UTF-8嗎？這是一個很糾結的問題。遺憾的是，我不能給出一個明确的答案。我的經驗是，不必要設定什麼特定的字
符集，然後utf-8字元集可能會出錯，因為它顯示錯掉的字元(比如”»”)。而是用iso-8859-1 字元集，一切就都是正常的。
接近尾聲，讓我們重溫一些不太流行的以及不像border-radius和box-shadow那樣被廣泛需求的CSS3屬性。
或許你會常常遇到這個問題：某個容器對于其内的文字來說太小了，然後你不得不用javascript來截斷字元串并添加”…”符号以避免文字溢出。
忘
掉它吧！采用CSS3和text-overflow:
ellipsis，如果文字比它的容器的寬度要長的話，你就可以強制文字以”…”結束它。唯一的要求是設定overflow:hidden。不幸的
是，Firefox不支援這個屬性，但是貌似在最近的版本中将會提供支援。
浏覽器支援: CSS 3，所有浏覽器的最新版本，除了Firefox，IE從IE6開始支援，據說Firefox到6.0也會提供支援的——希望如此吧。
當 文字在一個比較窄的容器中時，它的某個部分可能會因為太長而不能正确的換行。比如連結就常常引起問題。如果你不想用overflow: hidden隐藏溢出的文字，那麼你就可以設定 word-wrap 為break-word，它可以讓字元串在到達容器的寬度限制時換行。
浏覽器支援: CSS 3，所有現代浏覽器。
如果你在使用Firefox或Chrome，那麼你肯定注意到了文本框的右下角預設有個小的搖桿，它可以讓你調整它們的大小。這個标準的行為由CSS3 屬性 resize: both實作。
但是它并不僅限于textarea。它可以用于所有的HTML元素。horizontal 和 vertical 值用于控制調整水準方向還是垂直方向。
請注意：對于display:block元素，如果設定了overflow:visible，resize屬性将會無效(這一點原文描述不詳——by 神飛)。
浏覽器支援: CSS3, 除了Opera和IE以為的其它最新的浏覽器。
當你為一個設定了overflow:auto的元素指定背景圖檔的時候，當内容太多而出現滾動條後，拖動滾動條就會發現背景圖檔的位置是固定的，而不是随着滾動條移動。如果你想要背景圖檔随着内容而滾動，可以設定background-attachment:local。
Gecko 和WebKit 浏覽器處理這個屬性的方式很不一樣。前者預設啟用這個特性，而後者，你需要将其設定為optimizeLegibility。
浏覽器支援: CSS3, 所有WebKit 和Firefox浏覽器.
如果你已經開始使用CSS3，那麼你可能會比較熟悉transform: rotate()，這個在z軸上旋轉元素的屬性。
但是你是否也知道，它也可以更深入的旋轉的(比如，圍繞x軸和y軸)？ 這些變形結合-webkit-backface-visibility: hidden會更合适。
如果你滑鼠經過這個元素，它将會旋轉180°，倒轉過來:
小技巧:如果隻是映射一個元素，你可以設定transform為rotateX(180deg) (對應rotateY)或者設定transform 為scaleX(-1) (對應scaleY).
浏覽器支援: CSS3, WebKit、firefox、Opera以及IE9
正如你希望見到的，還有很多未知的很有用的屬性。他們中的很多仍然處于試驗性階段并且可能一直這樣甚至最終可能會被浏覽器擯棄。而有些有望在後續版本中被所有的浏覽器支援。
然而，很難判斷判斷他們中的一些是好是壞，WebKit特有的屬性随着iOS和Android的成功顯得越來越重要。當然，一些CSS3屬性多多少少已經可以使用了。
祝你體驗快樂！