CSS3文本陰影text-shadow屬性詳解
發(fā)布時(shí)間：2016-08-08 11:45:31 作者：佚名 
我要評論
我要評論下面小編就為大家?guī)硪黄P(guān)于CSS3文本陰影text-shadow屬性詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
文本陰影text-shadow屬性特效：
1.右下角陰影，左下角陰影，左上角陰影，右上角陰影
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>text-shadow</title>
- <style>
- p{
- text-align:center;
- margin:0;
- font-family: helvetica,arial,sans-serif;
- color:#999;
- font-size:80px;
- font-weight:bold;
- text-shadow:10px 10px #333;
- }
- </style>
- </head>
- <body>
- <p>Text Shadow</p>
- </body>
- </html>
文字效果為：
如果將text-shadow改成：text-shadow:-10px 10px #333 ，就將出現(xiàn)左下角陰影
將text-shadow改成：text-shadow:-10px -10px #333 , 就將出現(xiàn)左上角陰影
將text-shadow改成：text-shadow: 10px -10px #333 , 就將出現(xiàn)右上角陰影
2. 使用text-shadow設(shè)置立體文字效果
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>text-shadow</title>
- <style>
- p{
- text-align:center;
- margin:0;
- font-family: helvetica,arial,sans-serif;
- color:#999;
- font-size:80px;
- font-weight:bold;
- text-shadow:-1px -1px #fff,
- 1px 1px #333;
- }
- </style>
- </head>
- <body>
- <p>Text Shadow</p>
- </body>
- </html>
以上這篇CSS3文本陰影text-shadow屬性詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
- CSS3作為新興的前端技術(shù)可以實(shí)現(xiàn)很多復(fù)雜變化的效果，比如文字描邊。這里主要用到text-shadow屬性，顧名思義就是為文字加上陰影效果，本文給大家介紹純CSS3代碼實(shí)現(xiàn)文字描2016-04-25
- 這篇文章主要介紹了CSS將文字描邊及填充文字顏色的方法,分別為text-stroke和text-fill-color屬性的使用方法講解,注意瀏覽器的兼容問題,需要的朋友可以參考下2016-03-07
CSS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-25CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)
這篇文章主要介紹了CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-04-26CSS3 text-shadow實(shí)現(xiàn)文字陰影效果
這篇文章主要介紹了CSS3 text-shadow實(shí)現(xiàn)文字陰影效果的方法，豐富文字排版布局美化效果，感興趣的小伙伴們可以參考一下2016-02-24- 這篇文章主要介紹了舉例詳解CSS中的text-shadow文字陰影效果使用,text-shadow的運(yùn)用是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-19
- 這篇文章主要介紹了用CSS的text-shadow制作超炫文字效果全攻略,文中給出了諸多陰影效果示例,超級推薦!需要的朋友可以參考下2015-07-23
- 前段時(shí)間整理了CSS3中的漸變Gradient、透明度RGBA、邊框圓角box-radius三個(gè)新屬性的使用方法，這幾次繼續(xù)整理了有關(guān)于CSS3的text-shadow的使用方法,需要了解的朋友可以詳細(xì)2012-12-25
CSS3基礎(chǔ)(RGBa、text-shadow、box-shadow、border-radius)
本文介紹CSS 3部分新屬性基礎(chǔ)，包括RGBa、text-shadow、box-shadow、border-radius。這些屬性通常用來增強(qiáng)網(wǎng)頁布局和美譽(yù)度。（譯者注：在支持CSS3的瀏覽器如Firefox、Safa2012-11-13IE下實(shí)現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法
IE9瀏覽器確實(shí)不支持CSS3 text-shadow屬性，且根據(jù)最近的IE10 preview版的反饋，IE10瀏覽器也是不支持text-shadow屬性的2011-05-11