DIV CSS3 text shadow字型陰影

2021-07-07 07:29:30 字數 1420 閱讀 8893

css3設定文字陰影效果對文字字型設定陰影效果篇text-shadow樣式,本來在css2版本中也有此屬性,但在css3中文字陰影text-shadow再次被應用,豐富文字排版布局美化效果。

1、css3單詞:

text-shadow

2、語法結構

div 

設定div盒子裡文字陰影效果距離左5px和距離上2px開始顯示陰影效果,同時陰影大小範圍為6px,陰影顏色為黑色(#000)。

文字陰影語法結構分析圖

3、說明

文字顯示陰影效果共4個值,第乙個代表距離左多少距離開始顯示陰影效果,第二個值代表距離上多少距離開始顯示陰影效果,第三個值代表陰影範圍大小,第四個值為陰影效果顏色。

1、案例html**

我陰影文字

div>

<

divclass

="txt"

>

文字陰影測試內容1

div>

<

divclass

="txt2"

>

文字陰影測試內容2

div>

body

>

html

>

2、對應css**:

.txt   

.txt2  

3、案例效果截圖

谷歌瀏覽器文字陰影例項效果截圖

4、說明

此案例設定對兩個盒子分別設定了陰影案例,前者陰影範圍設定比較大,顏色為桔黃色;後者設定1px範圍大小顏色為黑色的陰影。

第3天 DIV CSS布局

有4個值的時候 maigin 10px 5px 15px 20px 上 右 下 左 有3個值的時候 margin 10px 5px 15px 上 左右 下 有2個值的時候 magin 10px 代表4個值都是10px margin需要注意的3個問題 1 body有預設的margin,chrome是8...

網頁設計DIV CSS 第3 天 定義語言編碼

第三步是定義你的語言編碼,類似這樣 為了被瀏覽器正確解釋和通過 w3c 校驗,所有的 xhtml 文件都必須宣告它們所使用的編碼語言,我們一般使用 gb2312 簡體中文 製作多國語言頁面也有可能用 unicode iso 8859 1等,根據你的需要定義。通常這樣定義就可以了。但是要補充說明的是,...

DIV CSS網頁設計 有用的3個CSS技巧

一 在一行內宣告css 複製 如下 h2 h2 第二種看起 來的確格式化,但是不會在閱讀上有任何幫助。寫在一行內可以讓你更快的找到需要的部分。以前我也是寫成類似第二種方式,但是逐漸發現就像文章 說的一樣,沒多大用。一行看起來又爽快又省地方還能讓檔案更小。二 分塊書寫 這樣書寫 可以讓css更頁面化,...