溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS3 中怎么利用text-shadow實(shí)現(xiàn)文字陰影效果

發(fā)布時(shí)間：2021-08-10 14:03:48 來源：億速云 閱讀：120 作者：Leah 欄目：web開發(fā)

CSS3 中怎么利用text-shadow實(shí)現(xiàn)文字陰影效果，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

CSS3設(shè)置文字陰影效果，對(duì)文字字體設(shè)置陰影效果，采用text-shadow樣式，本來在CSS2版本中也有此屬性，但在CSS3中文字陰影text-shadow再次被應(yīng)用，豐富文字排版布局美化效果。

CSS3單詞與語法

CSS3單詞： text-shadow

語法結(jié)構(gòu)：text-shadow: 5px 2px 6px black;

5px 代表著：陰影距離文字左5px顯示
2px 代表著：陰影距離文字上2px顯示
6px 代表著：陰影大小范圍
black 代表著：陰影顏色為黑色

例子：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4.     <meta charset="utf-8">  

  5.     <title></title>  

  6.     <style type="text/css">  

  7.     .All-orange {   

  8.         font: normal 14px 微軟雅黑,sans-serif;   

  9.         max-width: auto;   

  10.         max-height: auto;   

  11.         background-color: #f8f8f8;   

  12.         padding: 30px 30px 20px 30px;   

  13.         color: #666;   

  14.         border-radius: 5px   

  15.     }   

  16.     .All-orange h2 {   

  17.         font: normal 32px 微軟雅黑,sans-serif;   

  18.         padding: 20px 0 20px 40px;   

  19.         display: block;   

  20.         margin: -30px -30px 10px -30px;   

  21.         color: #FFF;   

  22.         background-color: #0CF;   

  23.         border-radius: 5px;   

  24.         text-shadow:5px 2px 6px #000;   

  25.         box-shadow: 5px 2px 6px #000;   

  26.     }   

  27.     .All-orange img {   

  28.         float: left   

  29.     }   

  30.     .All-orange h2 img{   

  31.         margin-top: -15px;   

  32.     }   

  33.     </style>  

  34. </head>  

  35. <body>  

  36.     <div class="All-orange" id="all">  

  37.     <h2><img src="../img/launcher_icon_.png" />  

  38.         悲傷黑白棋   

  39.     </h2>  

  40.    </div>  

  41. </body>  

  42. </html>  

關(guān)于CSS3 中怎么利用text-shadow實(shí)現(xiàn)文字陰影效果問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手