CSS 3 + HTML 5 是未來的 Web，它們都還沒有正式到來，雖然不少浏覽器已經開始對它們提供部分支援。本文介紹了 5 個 CSS3 技巧，可以幫你實作未來的 Web，不過，這些技術不應該用在正式的客戶項目，它們更适合你的個人部落格站點，Web 設計社群，或者不會有客戶向你投訴的場合。
<a href="http://twitter.com/smashingmag"></a>
CSS3 新功能中最常用的一項是圓角效果，标準 HTML 方塊對象是90度方角的，CSS3 可以幫你實作圓角。
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
甚至單個角也可以實作圓角，不過 Mozilla 和 Webkit 的文法稍有不同。
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;
所支援的浏覽器：Firefox, Safari , Chrome
請參閱:
<a href="http://www.w3.org/TR/css3-background/#the-border-radius">W3C Working Draft</a>
<a href="http://www.css3.info/preview/rounded-border/">Border-radius on CSS3.info</a>
<a href="http://www.the-art-of-web.com/css/border-radius/">The Art of Web</a>
顧名思義，圖形化邊界就是允許使用圖檔作為對象的邊界，文法如下:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
這裡，border: 5px 設定了邊界的寬度，然後，每個邊界的圖檔定義告訴浏覽器，使用圖檔的多大一部分來充當邊界。邊界圖檔還可以針對每一條邊單獨設定：
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-rightright-image
border-right-image
支援的浏覽器： Firefox 3.1, Safari , Chrome.
請參考:
<a href="http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri">W3C Working Draft</a>
<a href="http://www.css3.info/preview/border-image/">Border-image on CSS3.info</a>
<a href="http://ejohn.org/blog/border-image-in-firefox/">Border-image in Firefox</a>
<a href="http://24ways.org/"></a>
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
前兩個屬性設定陰影的 X / Y 位移，這裡分别是 10px，第3個屬性定義陰影的虛化程度，最後一個設定陰影的顔色。文字陰影也可以這樣設定：
text-shadow: 2px 2px 5px #ccc;
支援的浏覽器：Firefox 3.1, Safari, Chrome (隻支援 Box 陰影) ，Opera (隻支援文字陰影).前3個數字表示紅綠藍三色的值，最後一個值代表透明度，另外，我們還可以使用 opacity 實作透明度（目前的燈箱效果多使用該技巧 - 譯者）
<a href="http://www.w3.org/TR/css3-background/#the-box-shadow">W3C Working Draft</a>
<a href="http://www.css3.info/preview/box-shadow/">Box-shadow on CSS3.info</a>
<a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows">W3C Working Draft</a>
<a href="http://www.css3.info/preview/text-shadow/">Text-shadow on CSS3.info</a>
rgba(200, 54, 54, 0.5);
background: rgba(200, 54, 54, 0.5);
color: rgba(200, 54, 54, 0.5);
color: #000;
opacity: 0.5;
支援的浏覽器： Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).
<a href="http://www.w3.org/TR/css3-color/#rgba-color">W3C Working Draft</a>
<a href="http://www.css3.info/preview/rgba/">RGBA on CSS3.info</a>
<a href="http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children">Pure CSS Opacity</a>
<a href="http://www.taptaptap.com/"></a>
Web 設計中有幾種字型是比較安全的，如 Arial,Helvetica, Verdana, Georgia, Comic Sans （中文的，一般來說宋體是唯一安全的 - 譯者），現在，使用 CSS3 的 @font-face 可以自己指定字型，不過因為牽扯到版權問題，實際能用的字型也是有限的 (另外，體積龐大的中文字型也是一個不好解決的問題 - 譯者)。
文法如下:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
請參閱：
<a href="http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding">Fonts available for font-face embedding</a>
<a href="http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work">Font-face in IE, making Web fonts work</a>
上面講述的這些 CSS3 功能會給你的網站帶來出色的效果，但仍有一些負面的因素必須考慮：
Internet Explorer: 46% 的 Internet 無法看到這些效果，是以不要将這些東西用于重要的設計。同時保證，在這些效果不起作用的地方，有替代設計可用。
CSS 驗證問題: 這些 CSS3 功能并非最終版本，目前不同的浏覽器使用不同标簽實作這些功能，可能為你的 Style Sheet 帶來驗證上的問題。
臃腫代碼: 因為不同浏覽器要使用不同定義文法，最終将導緻你的 CSS 代碼十分臃腫。
不當的使用: 對這些效果的不當使用，可能帶來一些不良後果，陰影效果尤其如此。
<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å！25個優秀的國外單頁網站設計作品欣賞</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>
<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>
歡迎任何形式的轉載，但請務必注明出處。