使用CSS3建立不可選的的文字，css3建立可選
下面的例子展示了在HTML5中你如何使用CSS建立不可選的文字。
Html代碼
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Creating non-selectable text using CSS</title>
- <style type="text/css">
- div {
- margin-bottom: 20px;
- padding: 10px;
- background: rgba(10%, 10%, 10%, 0.3);
- -moz-border-radius: 15px;
- border-radius: 15px;
- }
- div#d2 {
- -moz-user-select: none;
- -khtml-user-select: none;
- user-select: none;
- font-style: italic;
- }
- </style>
- </head>
- <body>
-
- <div id="d1">[selectable] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare, urna placerat condimentum vehicula, magna est suscipit leo, auctor laoreet erat massa eget tellus. Etiam pharetra, orci eu gravida tempus, enim est venenatis diam, id facilisis justo ante ut arcu. Sed nibh eros, porta ac porta ac, fermentum ut ante. Etiam pulvinar consectetur urna sit amet fermentum. Aliquam quis pellentesque tortor. In ut lobortis enim. Pellentesque luctus orci nec massa lacinia consectetur. Etiam cursus, leo et pellentesque tempus, diam elit interdum ipsum, sed pulvinar nibh justo vel urna. Phasellus ligula elit, sodales eget aliquet et, ullamcorper ut lorem. Praesent eget quam id ligula iaculis tincidunt eu et nulla. Ut dui dui, dictum sed lobortis eu, porta nec urna. In adipiscing, massa sed scelerisque elementum, tortor massa cursus velit, ut tincidunt mi lacus id magna. Morbi vestibulum venenatis massa sit amet convallis. Aliquam erat volutpat.</div>
- <div id="d2">[non selectable] Nam a lacus ante, a tincidunt dolor. Sed felis dolor, ullamcorper vitae luctus at, iaculis eu dui. Mauris ullamcorper nisl id tortor elementum mattis. Aenean ut ligula ac ipsum pharetra dapibus. Praesent convallis tincidunt ligula sit amet adipiscing. Morbi massa mauris, mollis ornare mollis ut, imperdiet nec nibh. Praesent sollicitudin tellus at nisl sodales lobortis euismod purus laoreet. Vivamus nec urna vel nibh volutpat rhoncus quis eget justo. Donec mi lacus, dapibus nec tristique eu, fringilla id mi. Maecenas vitae odio a tortor cursus fermentum eu eget eros. Vestibulum sit amet metus purus. Integer vestibulum sem nec justo facilisis tempor non sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget mattis metus.</div>
- <div id="d3">[selectable] Proin lacinia sem fringilla est lacinia facilisis. Praesent turpis massa, bibendum eu ultrices ut, viverra vitae quam. Morbi a lorem mi, eget congue arcu. Sed dapibus molestie neque, eget tempus nibh viverra at. Praesent sit amet vestibulum ipsum. Donec in lectus ac urna accumsan feugiat. Sed at nunc felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis nec ipsum justo. Nullam laoreet enim vel quam tincidunt imperdiet. Maecenas sollicitudin nulla a metus ornare tempus. Nullam rhoncus fermentum lorem id pellentesque.</div>
-
- </body>
- </html>
源碼下載：
creating-non-selectable-text-using-css.zip
CSS3對於不可以適用的瀏覽器應該怎辦
目前主流瀏覽器對於CSS3支援情況的依次是：Chrome、safari、firefox 、 opera & IE9 ，firefox甚至連CSS3的選取器都不是全部支援的，而其他的都支援。除了Chrome&safari以外，其他的對於倒影/翻轉等樣式的支援都是很有限的，opera甚至不支援背景顏色的漸層和transform動畫(太土了)。IE6\7\8就不要奢求太多了，即使部分支援CSS3的IE8，支援程度尚不足1/10.
CSS3在不支援的瀏覽器上面就相當於隨便寫的一組樣式表定義：div{ haha:huhu;}，對頁面樣式不會產生作用的。
不支援就是不支援沒有什麼怎麼辦的，對於CSS3中的圓角、倒影、傾斜(旋轉)等定義在不支援的瀏覽器上面通常直接使用背景圖片代替。動畫等效果就只能用javascript來實現了。
怎利用CSS3製作3D效果文字具體實現樣式解答
複製代碼代碼如下:.example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}譯者註：X表示x軸上的位移，可為負值；Y表示y軸上的位移，可為負值；Blur表示投影的寬度，不能為負值；Color為投影的顏色。
堆疊多層CSS投影
雖然我們沒有必要堆疊多層投影，但通過堆疊多層投影會有更好的3D效果
開始建立3D文字
你可能會選擇比文字更深的顏色來作為投影的顏色，所以這個例子中我就用白色的文字，用深一點的灰色作為投影顏色，這個例子中我將H2的文字渲染3D效果，css代碼如下：
複製代碼代碼如下:h2{text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下：好了，到這裡你已經建立了基本的3D文字，然而，讓我們進一步來實現滑鼠滑過的文字放大效果，並用css的transision屬性實現圓滑的淡入淡出效果。
首先用transform屬性實現滑過字型放大
複製代碼代碼如下:h2:hover{/* CSS3 Transform Effect */
-webkit-transform: scale(1.2); /* Safari & Chrome */
-moz-transform: scale(1.2); /* Firefox */
-o-transform: scale(1.2); /* Opera */}效果如下：然後利用transition屬性實現淡入淡出效果
複製代碼代碼如下:h2{/* CSS3 Transition Effect */
-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */
-moz-transition: all 0.12s ease-out; /* Firefox */
-o-transition: all 0.12s ease-out; /* Opera */}到此，我們就用CSS3實現了3D效果的文字，並且在滑鼠滑過是讓字型放大，且有淡入淡出的效果，這一切是用純CSS實現的哦。
