简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

CSS3的text-shadow字體陰影怎麼使用

php中世界最好的语言
發布： 2017-11-24 09:27:30
原創
2171 人瀏覽過

CSS3的text-shadow樣式是設定文陰影效果，原本在CSS2中就有這個屬性，在CSS3中的文字陰影再次貝應用，那麼我們就來看一下需要如何使用text-shadow。

CSS3字：

text-shadow

語法結構

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

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

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

案例HTML程式碼

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>字体阴影 在线演示</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div>我阴影文字</div> 
<div class="txt">文字阴影测试内容1</div> 
<div class="txt2">文字阴影测试内容2</div> 
</body> 
</html>
登入後複製

對應CSS程式碼：

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

以上就是CSS3的text-shadow使用方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼隱藏溢出DIV的內容

#CSS佈局有哪些技巧

CSS裡字體樣式怎麼設定

#

以上是CSS3的text-shadow字體陰影怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css3 text-shadow
來源：php.cn
上一篇：CSS3的box-shadow怎麼使用 下一篇：屬性選擇器和偽類選擇器的使用方法
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
MySQL：'從......中選擇文字作為<此處變數或子查詢>” 我有下表，其中包含以下數據：id文本語言1德語文本德語2英文文本英語我想要的是獲得以下格式的結果：german="deutschertext"english=&...
來自於 2024-04-06 19:25:54
0
2
529
無法從網站取得輸入元素 所以我試圖從Twitter獲取一個輸入元素，但當我運行它時，它不斷在節點終端中給我一個這樣的錯誤，結果，由此代碼創建的瀏覽器窗口將自行關閉，因為它找不到正確的輸入選擇器。如何取得正...
來自於 2024-04-06 18:59:57
0
1
442
供應商特定偽元素上的 JavaScript 懸停事件 我有以下htmlinput標籤。 $("input[type='range']::-webkit-slider-thumb").on('hover',funct...
來自於 2024-04-06 15:35:24
0
1
274
將工具提示與相對父級對齊 我花了兩天時間試圖解決這個問題，但我意識到我無法獨自完成。我試圖將我的工具提示相對於父級居中。這是我的程式碼=>letcollection=document.querySel...
來自於 2024-04-06 13:16:59
0
2
394
在區塊換行符號後顯示一個元素 我目前有這個：我想將圖標div放在文字末尾，但因為它是一個“塊”，所以我無法使其工作。想要的輸出：程式碼片段：*{font-family:Arial,'sans-serif'}.t...
來自於 2024-04-04 21:45:21
0
1
271
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！