建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家詳細(xì)介紹了如何css制作立體字體，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出興國免費(fèi)做網(wǎng)站回饋大家。
html代碼：
前端開發(fā)
css怎么設(shè)置字體立體？
css里面還是首先來全局的設(shè)置，為了避免視覺疲勞，我們修改了背景顏色和文字顏色。
body{
background-color: #666;
}
@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);
.text {
font-family:"微軟雅黑", "Dosis", sans-serif;
font-size: 80px;
text-align: center;
font-weight: bold;
line-height:200px;
text-transform:uppercase;
position: relative;
}然后是簡單的效果的核心代碼
/*簡單的效果*/
.effect01{
background-color: #7ABCFF;
color:#FFD300;
text-shadow:
0px 0px 0 #b89800,
1px -1px 0 #b39400,
2px -2px 0 #ad8f00,
3px -3px 0 #a88b00,
4px -4px 0 #a38700,
5px -5px 0 #9e8300,
6px -6px 0 #997f00,
7px -7px 0 #947a00,
8px -8px 0 #8f7600,
9px -9px 0 #8a7200,
10px -10px 0 #856e00,
11px -11px 0 #806a00,
12px -12px 0 #7a6500,
13px -13px 12px rgba(0, 0, 0, 0.55),
13px -13px 1px rgba(0, 0, 0, 0.5);
}從中我們可以看出，利用text-shadow實(shí)現(xiàn)立體效果的要素有三：
設(shè)置多個(gè)陰影實(shí)現(xiàn)縱深感，
陰影的水平和垂直偏移變化實(shí)現(xiàn)方向感，
陰影的顏色漸變實(shí)現(xiàn)錯(cuò)落感。
以上就是css制作立體字體具體操作，代碼應(yīng)該是足夠清楚的，而且我也相信有相當(dāng)?shù)囊恍├涌赡苁俏覀內(nèi)粘９ぷ骺赡軙姷玫降摹Ｍㄟ^這篇文章，希望你能收獲更多。
本文名稱：css制作立體字體
鏈接分享：http://fisionsoft.com.cn/article/godhep.html
