DIV中CSS3 text-shadow字體陰影的使用示例

發(fā)布時(shí)間：2021-01-13 11:15:16 來(lái)源：億速云閱讀：204 作者：小新欄目：web開發(fā)

這篇文章主要介紹了DIV中CSS3 text-shadow字體陰影的使用示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、CSS3單詞與語(yǔ)法

1、CSS3單詞：
text-shadow

2、語(yǔ)法結(jié)構(gòu)

p{text-shadow:5px 2px 6px #000;}

設(shè)置p盒子里文字陰影效果距離左5px和距離上2px開始顯示陰影效果，同時(shí)陰影大小范圍為6px，陰影顏色為黑色（#000）。

3、說(shuō)明
文字顯示陰影效果共4個(gè)值，第一個(gè)代表距離左多少距離開始顯示陰影效果，第二個(gè)值代表距離上多少距離開始顯示陰影效果，第三個(gè)值代表陰影范圍大小，第四個(gè)值為陰影效果顏色。

二、案例

1、案例HTML代碼

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>字體陰影 在線演示 DIVCSS5</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
<!-- www.divcss5.com --> 
</head> 
<body> 
<div>我陰影文字</div> 
<div class="txt">文字陰影測(cè)試內(nèi)容1</div> 
<div class="txt2">文字陰影測(cè)試內(nèi)容2</div> 
</body> 
</html>

2、對(duì)應(yīng)CSS代碼：

.txt {text-shadow:5px 1px 6px #F93 }  
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“DIV中CSS3 text-shadow字體陰影的使用示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

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

DIV中CSS3 text-shadow字體陰影的使用示例

一、CSS3單詞與語(yǔ)法

二、案例

猜你喜歡

最新資訊

相關(guān)推薦

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

一、CSS3單詞與語(yǔ)法

二、案例