css中的text-shadow字體投影屬性樣式怎么用

發(fā)布時(shí)間：2022-03-02 09:55:00 來(lái)源：億速云閱讀：316 作者：小新欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css中的text-shadow字體投影屬性樣式怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

text-shadow為css文字陰影、css字體投影與字體陰影含胡效用效果的CSS屬性單詞

css text-shadow陰影功效

一、text-shadow先容

text-shadow是CSS格局屬性單詞，是配置對(duì)象中文本的翰墨字體能否有陰影及含糊成果的CSS名堂。

1、text-shadow的值
通長(zhǎng)時(shí)間置4個(gè)值，每個(gè)值空格離隔，值離別：一個(gè)暗影色調(diào)、暗影字體左上角起靠左隔絕距離、暗影字體左上角起靠上間隔、暗影高度寬度大?。：剑?/p>

css中的text-shadow字體投影屬性樣式怎么用
text-shadow解析闡發(fā)圖

text-shadow:#000 3px 4px 5px
告白：
設(shè)置裝備擺設(shè)對(duì)象內(nèi)筆墨陰影色采為彩色，陰影靠字體左上角起靠左3px，暗影靠字體左上角起靠上4px，陰影大?。▽?、高）含糊程度為5px。

2、暗影大小與含胡
text-shadow有三個(gè)數(shù)值，前兩個(gè)配置暗影位置，末了一個(gè)數(shù)值設(shè)置暗影大小模糊水準(zhǔn)。而值越大陰影變大自然也越模糊，值小天然暗影規(guī)模小就清楚。

css中的text-shadow字體投影屬性樣式怎么用
暗影大小與含混關(guān)系

從上圖看出暗影值越大陰影越含混。

3、兼容
IE8及以上閱讀器兼容，支流閱讀器兼容好比谷歌chrome、蘋(píng)果

二、容易用法

1、css代碼

div{text-shadow:#F00 3px 4px 5px}
p{text-shadow:#000 1px 1px 2px}

2、告白
div{text-shadow:#F00 3px 4px 5px}
配置DIV內(nèi)翰墨暗影血色，暗影分袂隔絕距離左和上為3px和4px，陰影大小模糊范疇為5px

p{text-shadow:#000 1px 1px 2px}
配置p內(nèi)筆墨暗影玄色，暗影別離隔斷左與上為1px，暗影領(lǐng)域大小2px

3、截圖

css中的text-shadow字體投影屬性樣式怎么用
css字體陰影實(shí)例成就

三、css陰影精簡(jiǎn)實(shí)例

在一段文字中，指定幾個(gè)文字運(yùn)用text-shadow配置陰影成果。

1、代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字暗影實(shí)例 CSS5</title>
<style>
.ebox{ font-size:16px;bac千克round:#000; text-align:center;
color:#666; width:300px; height:100px; line-height:40px}
.yying{text-shadow:#FFF 1px 1px 1px; color:#000}
</style>
</head>
<body>
<div class="ebox">進(jìn)修CSS，<span class="yying">上CSS5網(wǎng)</span>！</div>
</body>
</html>

關(guān)于“css中的text-shadow字體投影屬性樣式怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

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

css中的text-shadow字體投影屬性樣式怎么用

一、text-shadow先容

二、容易用法

三、css陰影精簡(jiǎn)實(shí)例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

一、text-shadow先容

二、容易用法

三、css陰影精簡(jiǎn)實(shí)例