摘要:可為負值第個長度值陰影垂直偏移值。不允許負值設置陰影的顏色。字體微軟雅黑
2016年2月26日個人博客文章--遷移到segmentfault
(1)text-shadow(文本陰影)
在介紹css3:text-shadow文本陰影之前,我們先來看看用它都能實現什么效果:
沒錯文本的陰影的效果很強大,接下來我們就一起開始學習吧.
語法:text-shadow:none | length{2,3} color
默認值:none
取值:
none:無陰影
第1個長度值:陰影水平偏移值。可為負值
第2個長度值:陰影垂直偏移值。可為負值
第3個長度值:可選,陰影模糊值。不允許負值
color: 設置陰影的顏色
說明:可以設定多組效果,每組參數值以逗號分隔
text-shadow:水平偏移量 垂直偏移量 陰影模糊值 顏色(rgba),
</>復制代碼
水平偏移量 垂直偏移量 陰影模糊值 顏色(rgba),
水平偏移量 垂直偏移量 陰影模糊值 顏色(rgba)
注意:(1)使用空格分開不同屬性值 (2)使用逗號分開不同陰影屬性
</>復制代碼
字體 - body{font-family:"微軟雅黑",Arail,Tabhoma; }
- p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
- p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
- p:nth-child(2){
- background: #000; color: #fff;
- text-shadow:
- 0 0 3px rgba(229,0,245,1),
- 0 0 6px rgba(229,0,245,0.9),
- 0 0 8px rgba(229,0,245,0.9),
- 0 0 14px rgba(229,0,245,0.9),
- 0 0 22px rgba(229,0,245,0.7),
- 0 0 28px rgba(229,0,245,0.7),
- 0 0 36px rgba(229,0,245,0.6),
- 0 0 48px rgba(229,0,245,0.5),
- 0 0 54px rgba(229,0,245,0.3),
- 0 0 68px rgba(229,0,245,0.1);}
- p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
Beautiful Text
Beautiful Text
Beautiful Text
在瀏覽器上展示效果如圖所示:
(2)box-shadow(盒陰影)
因為box-shadow與text-shadow用法幾乎相同只是box-shadow與文本陰影相比,盒陰影多了一個屬性值——陰影外延值(第四個值)
語法:box-shadow:none | length{2,4} color默認值:none
取值:
none: 無陰影
第1個長度值:陰影水平偏移值。可為負值
第2個長度值:陰影垂直偏移值。可為負值
第3個長度值:可選,陰影模糊值。不允許負值
第4個長度值:可選,陰影外延值。不允許負值
color: 設置陰影的顏色。
</>復制代碼
字體 - body{font-family:"微軟雅黑",Arail,Tabhoma; }
- p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
- p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
- p:nth-child(2){
- background: #000; color: #fff;
- text-shadow:
- 0 0 3px rgba(229,0,245,1),
- 0 0 6px rgba(229,0,245,0.9),
- 0 0 8px rgba(229,0,245,0.9),
- 0 0 14px rgba(229,0,245,0.9),
- 0 0 22px rgba(229,0,245,0.7),
- 0 0 28px rgba(229,0,245,0.7),
- 0 0 36px rgba(229,0,245,0.6),
- 0 0 48px rgba(229,0,245,0.5),
- 0 0 54px rgba(229,0,245,0.3),
- 0 0 68px rgba(229,0,245,0.1);}
- p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
-
- div{ float:left; margin:100px; width:400px; height:300px; font-size: 20px; line-height: 300px; text-align: center; }
- .d1{box-shadow:0px 0px 50px 50px rgba(153,153,238,1);}
- .d2{box-shadow:50px 0px 50px 50px rgba(153,153,238,1);}
- .d3{box-shadow:-50px 0px 50px 0px rgba(153,153,238,1);}
Beautiful Text
Beautiful Text
Beautiful Text
1
2
3
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52051.html
摘要:可為負值第個長度值陰影垂直偏移值。不允許負值設置陰影的顏色。字體微軟雅黑 2016年2月26日個人博客文章--遷移到segmentfault (1)text-shadow(文本陰影) 在介紹css3:text-shadow文本陰影之前,我們先來看看用它都能實現什么效果: showImg(https://segmentfault.com/img/bV6z1P?w=300&h=136); ...
摘要:規則取值關鍵字位置取消顏色十六進制簡寫為函數關鍵字漸變色長度絕對單位相對單位當前元素上的字體大小當前元素中設定的字體大小百分比字體樣式可以被繼承族微軟雅黑宋體字體棧微軟雅黑大小網頁默認字體為粗細是否打開斜體速寫,簡寫 規則取值: 關鍵字: 位置 left right center top bottom medium 取消 ...
閱讀 3273·2021-11-22 14:44
閱讀 1117·2021-11-16 11:53
閱讀 1270·2021-11-12 10:36
閱讀 705·2021-10-14 09:43
閱讀 3696·2019-08-30 15:55
閱讀 3403·2019-08-30 14:14
閱讀 1741·2019-08-26 18:37
閱讀 3415·2019-08-26 12:12