站長資訊網
之前的文章《手把手教你怎么使用html+css實現輪播圖效果（代碼分享）》中，給大家介紹了怎么使用html+css實現輪播圖效果。下面本篇文章給大家介紹怎么使用css3給字體添加立體效果，我們一起看看怎么做。
字體添加立體效果圖如下
1、新建一個html文件，首先寫div標簽輸入寫contenteditable屬性規定是否允許用戶編輯內容，可以支持IE，不用再為兼容問題。<div contenteditable="true">可以編輯里面的內容</div> ，再來class是類選擇器，可以純靜態在網頁中控制字體顏色。
html代碼示例
<div contenteditable="true" class="text eff">字體特效</div>
2、通過給css全局的設置，寫使用head標簽之間加入<style type="text/css">串代碼然后在style標簽中輸入div代background-color屬性設置元素的背景顏色。
代碼示例
body{ background-color: #456; }
代碼效果
3、效果出來了，只是給背景添加顏色，接著給字體特效通過在style標簽中輸入字體、字體尺寸、水平對齊方式、粗細、行間距、字體大小、頂部、底部、左側和右側屬性定位。
代碼示例
.text { font-family:"微軟雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative; }
代碼效果
4、效果出來了，只是給字體變大也加粗并居中，接下來給字體特通過在style標簽中輸入背景顏色、陰影。
利用text-shadow屬性來生成文本陰影效果。它的使用方法很簡單，text-shadow:0px 0px 0px #000，X軸，Y軸，模糊程度(不可是負值)，陰影顏色。
代碼示例
.eff{ background-color: #333; color:#fefefe; text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6); }
代碼效果
通過修改參數就可以實現多種特效
ok,編輯代碼完成。
推薦學習：CSS3入門教程
