位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

CSS3 文本陰影 text-shadow

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

    使用text-shadow屬性可以為文本設(shè)置陰影。在text-shadow還沒(méi)有出現(xiàn)時(shí)，如果在網(wǎng)頁(yè)設(shè)計(jì)中添加陰影，則需要用Photoshop制作圖片。有了CSS3,可以直接使用text-shadow屬性來(lái)指定陰影。這個(gè)屬性有兩個(gè)作用：產(chǎn)生陰影和模糊主體。這樣，在不使用圖片時(shí)，也能給文字增加質(zhì)感。

    使用text-shadow屬性可以為文本添加一個(gè)或多個(gè)陰影。該屬性是逗號(hào)分隔的陰影列表，每個(gè)陰影由兩或三個(gè)長(zhǎng)度值和一個(gè)可選的顏色值進(jìn)行規(guī)定，省略的長(zhǎng)度是0。

    text-shadow屬性有四個(gè)值，要按照順序排列：

    ?h-shadow：必需，水平陰影的位置，允許負(fù)值。

    ?v-shadow：必需，垂直陰影的位置，允許負(fù)值。

    ?blur：可選，模糊的距離。

    ?color：可選，陰影的顏色。

    下面通過(guò)一個(gè)實(shí)例來(lái)了解text-shadow屬性。

    【例題】使用text-shadow屬性

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<style> 

p{

text-shadow: 5px 10px 10px red;

}

</style>

</head>

<body>

<p>我是測(cè)試文字陰影的文本</p>

</body>

</html>

image.png

繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部