CSS3 text shadow字體陰影效果

時間 2019-11-10

標籤 css3 css text shadow 字體陰影效果欄目 CSS 简体版

原文原文鏈接

1、text-shadow語法
一、語法：
對象選擇器 {text-shadow:X軸偏移量 Y軸偏移量陰影模糊半徑陰影顏色}
注：text-shadow可使用一個或多個投影，若是使用多個投影時必須須要用逗號「,」分開。
二、取值：
box-shadow屬性最多能夠有6個參數設置，他們分別取值：
(1) 陰影水平偏移量：是指陰影水平偏移量其值能夠是正負值能夠取正負值，若是值爲正值，則陰影在對象的右邊，反之其值爲負值時，陰影在對象的左邊;
(2) 陰影的垂直偏移量：是指陰影的垂直偏移量，其值也能夠是正負值，若是爲正值，陰影在對象的底部，反之其值爲負值時，陰影在對象的頂部;
(3) 陰影模糊半徑：此參數是可選，但其值只能是爲正值。若是值越大，陰影越模糊，反之陰影越清晰。若是其值爲0時，表示陰影不具備模糊效果。
(4) 陰影顏色：此參數可選，若是不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不同，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。
在CSS3沒有問世以前，處理文字陰影的方法，基本上都是圖片。直到CSS3的出現，讓咱們製做文字陰影的方法又有了進一步的提升。其實文字陰影——text-shadow在CSS2裏面出現過，可是在CSS2.0又沒無情的拋棄了，如今CSS3中又讓使用了，這說明文字陰影——text-shadow仍是值得我們重視的。因此做爲一名合格的前端人員，掌握文字陰影那必須是當務之急了。
CSS3設置文字陰影效果對文字字體設置陰影效果篇text-shadow樣式，原本在CSS2版本中也有此屬性，但在CSS3中文字陰影text-shadow再次被應用，豐富文字排版佈局美化效果。
CSS3單詞與語法
CSS3單詞： text-shadow
語法結構：text-shadow: 5px 2px 6px black;
5px 表明着：陰影距離文字左5px顯示
2px 表明着：陰影距離文字上2px顯示
6px 表明着：陰影大小範圍
black 表明着：陰影顏色爲黑色
例子： css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置字體陰影</title>
<style type="text/css">
body{ width:100%; margin:0px auto; padding:0px; font-family:"微軟雅黑", Arial, Helvetica, sans-serif;}
.orange { max-width:auto; max-height:auto; background-color:#f8f8f8; padding:30px 30px 20px 30px; color:#666; border-radius:5px;}
.orange h1 { font:normal 32px 微軟雅黑,sans-serif; padding:20px 0 20px 40px; text-align:center; display:block; color:#FFF; background-color:#0CF; border-radius:5px; text-shadow:5px 2px 6px #000; box-shadow:5px 2px 6px #000;}
</style>
</head>
<body>
<div class="orange" id="all">
<h1>h1標籤</h1>
</div>
</body>
</html>html

效果圖：前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。