css3文字陰影效果怎麼實現？【代碼詳解】-css教學-PHP中文網

首頁

web前端

css教學

css3文字陰影效果怎麼實現？【代碼詳解】

藏色散人

Sep 05, 2018 pm 01:49 PM

文字陰影這個詞，可能對初入css門的新手來說乍聽有點陌生，那麼我們換個說法，具有立體感的文字。這樣是不是腦中立刻出現了一些畫面。如果大家有看過我之前的這篇文章【css3製作陰影效果的方法詳解】的話，對div陰影效果應該有所了解了，這個主要的屬性是box-shadow樣式屬性。

那麼這篇文章繼續跟大家介紹css3怎麼製作文字陰影效果，也就是說如何做3d字體，這裡主要需要掌握的屬性就是text-shadow樣式屬性，有的小白或許會問text-shadow是啥？什麼意思？怎麼使用？各位莫急，下面我們就透過具體的範例程式碼進行詳細解說。

<!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軸為正值則表示往下偏移，為負值則往上，模糊值越大就越模糊。

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

以上就是關於css text-shadow屬性的具體使用方法介紹，也就是如何讓字體有3d效果的具體介紹。具有一定的參考價值，希望對有需要的朋友有幫助。

以上是css3文字陰影效果怎麼實現？【代碼詳解】的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn