之前的文章《手把手教你怎么使用html+css實(shí)現(xiàn)輪播圖效果（代碼分享）》中，給大家介紹了怎么使用html+css實(shí)現(xiàn)輪播圖效果。下面本篇文章給大家介紹怎么使用css3給字體添加立體效果，我們一起看看怎么做。

字體添加立體效果圖如下

1、新建一個(gè)html文件，首先寫div標(biāo)簽輸入寫contenteditable屬性規(guī)定是否允許用戶編輯內(nèi)容，可以支持IE，不用再為兼容問(wèn)題。<div contenteditable="true">可以編輯里面的內(nèi)容</div> ，再來(lái)class是類選擇器，可以純靜態(tài)在網(wǎng)頁(yè)中控制字體顏色。

html代碼示例

<div contenteditable="true" class="text eff">字體特效</div>

2、通過(guò)給css全局的設(shè)置，寫使用head標(biāo)簽之間加入<style type="text/css">串代碼然后在style標(biāo)簽中輸入div代background-color屬性設(shè)置元素的背景顏色。

代碼示例

body{   background-color: #456; }

代碼效果

3、效果出來(lái)了，只是給背景添加顏色，接著給字體特效通過(guò)在style標(biāo)簽中輸入字體、字體尺寸、水平對(duì)齊方式、粗細(xì)、行間距、字體大小、頂部、底部、左側(cè)和右側(cè)屬性定位。

代碼示例

.text {     font-family:"微軟雅黑", "Dosis", sans-serif;     font-size: 80px;     text-align: center;     font-weight: bold;     line-height:200px;     text-transform:uppercase;     position: relative; }

代碼效果

4、效果出來(lái)了，只是給字體變大也加粗并居中，接下來(lái)給字體特通過(guò)在style標(biāo)簽中輸入背景顏色、陰影。

利用text-shadow屬性來(lái)生成文本陰影效果。它的使用方法很簡(jiǎn)單，text-shadow:0px 0px 0px #000，X軸，Y軸，模糊程度(不可是負(fù)值)，陰影顏色。

代碼示例

.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); }

代碼效果

通過(guò)修改參數(shù)就可以實(shí)現(xiàn)多種特效

ok,編輯代碼完成。

推薦學(xué)習(xí)：CSS3入門教程