css3文字陰影效果如何實現

這篇文章給大家分享的是有關css3文字陰影效果如何實現的內容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。

目前創新互聯公司已為上千余家的企業提供了網站建設、域名、雅安服務器托管、網站托管、服務器托管、企業網站設計、東明網站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協力一起成長,共同發展。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3 text-shadow屬性使用示例</title>
    <style>
      .t1{
          text-shadow: 5px 5px 5px #029789;
          font-size: 40px;
          font-weight: bold;
          color: white;
      }
      .t2{
          text-shadow: -5px -5px 5px #1094f2;
          font-size: 40px;
          font-weight: bold;
     color: white;
      }
    </style>
</head>
<body>
<div class="demo">
    <p class="t1">text-shadow屬性使用示例1-文字陰影效果</p>
    <p class="t2">text-shadow屬性使用示例2-文字陰影效果</p>
</div>
</body>
</html>

上述代碼,我們通過瀏覽器訪問,效果如下截圖:

css3文字陰影效果如何實現

這樣看是不是字體已經有了立體感呢?那么大家有沒有發現示例1和示例2的不同處有哪些?其實顯而易見,示例1中的文字陰影部分是在文字的右下方!而示例2中的字體陰影是在文字的左上方!

這些效果都是因為css3中text-shadow樣式屬性!我們可以發現示例1中text-shadow的值分別是5px 5px 5px #029789;示例2中的值分別是-5px -5px 5px #1094f2;這四個值分別表示,x軸方向的偏移量、y軸的偏移量、模糊值、陰影顏色。那么導致陰影位置的不同是因為前兩個值的正負數值原因。

x軸為正值則表示往右偏移,為負值則往左,y軸為正值則表示往下偏移,為負值則往上,模糊值越大就越模糊。

那么了解了這些值的所屬含義,就能根據自己的喜好,隨意改變文字陰影效果。

感謝各位的閱讀!關于css3文字陰影效果如何實現就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

網站題目:css3文字陰影效果如何實現
網頁URL:http://m.kartarina.com/article28/jeshjp.html

成都網站建設公司_創新互聯,為您提供全網營銷推廣ChatGPT標簽優化面包屑導航域名注冊品牌網站設計

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都網站建設
主站蜘蛛池模板: 亚洲精品无码av人在线观看| 国产成年无码v片在线| 国产午夜无码精品免费看| 亚洲AV无码成人精品区蜜桃| 亚洲看片无码在线视频| 国产高清无码视频| 精品久久久无码21p发布| 午夜无码一区二区三区在线观看| 无码人妻精品一区二区三区在线| 国产怡春院无码一区二区| 国产精品va无码一区二区| 无码人妻一区二区三区在线水卜樱| 无码伊人66久久大杳蕉网站谷歌 | 韩国精品一区二区三区无码视频| 免费无码看av的网站| 无码AV波多野结衣久久| 亚洲无码黄色网址| 精品少妇人妻AV无码专区不卡| 韩国19禁无遮挡啪啪无码网站| 特级小箩利无码毛片| 久久久久亚洲av无码专区导航 | 永久免费AV无码国产网站| 国产在线拍偷自揄拍无码| 亚洲中久无码不卡永久在线观看| 无码丰满熟妇juliaann与黑人| 国精无码欧精品亚洲一区| 中文国产成人精品久久亚洲精品AⅤ无码精品 | 亚洲一级Av无码毛片久久精品| 18禁网站免费无遮挡无码中文| 久久久国产精品无码免费专区| 久久无码精品一区二区三区| 免费a级毛片无码a∨性按摩| 成人麻豆日韩在无码视频| 亚洲成a∧人片在线观看无码| 四虎成人精品无码| 无码精品人妻一区二区三区人妻斩 | 熟妇人妻系列aⅴ无码专区友真希 熟妇人妻系列av无码一区二区 | 无码丰满熟妇一区二区| 亚洲av中文无码乱人伦在线观看| 精品无码国产自产在线观看水浒传| 日韩免费无码一区二区三区|