一、text-shadow
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平陰影 垂直陰影 模糊半徑 color;
h-shadow和v-shadow可取負值,blur只能取正值。
二、使用
1、基礎
<style type="text/css"> .blur{ text-shadow:0 0 5px red;/*陰影無偏移*/ } .vh{ text-shadow:1px 1px 0 red; /*陰影偏移1px 1px*/ } .white{ color: white; text-shadow:2px 2px 4px black; } </style> <body> <h1 class="blur">霓虹燈效果的文字陰影</h1> <h1 class="vh">文字水平垂直陰影效果</h1> <h1 class="white">白色文字陰影效果</h1> </body>
2、浮雕效果
使用浮雕效果,模糊值必須設為0來增加質感。
<style type="text/css"> .relief{ color: #ccc; text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444; } </style> <body> <h1 class="relief">浮雕效果</h1> </body>
3、模糊效果
使用text-shadow製作模糊效果注意一點:把文字的前景色設定為透明,即transparent,模糊值越大效果越模糊。
<style type="text/css"> .relief{ /* color: #ccc;*/ color: transparent; text-shadow: 0 0 5px #f96; } </style> <body> <h1 class="relief">模糊效果</h1> </body>
4、內凹效果
注意:文字的前景色要比背景色暗,陰影顏色稍微比背景色亮一點點,這一步很重要,如果陰影顏色太亮會看起來很怪,如果太暗又沒有效果。
inset效果是文字的影子效果,也是一種常見的效果,給人一種微妙的突出效果。
<style type="text/css"> .inset{ color: #566F89; background: #C5DFF8; text-shadow: 1px 1px 0 #E4F1FF; } </style> <body> <h1 class="inset">內凹效果</h1> </body>
5、描邊效果
原理:使用兩個陰影,一個左上,一個右下,且不用模糊值。
<style type="text/css"> .stroke{ background-color: #666666; color: #fff; text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96; } </style> <body> <h1 class="stroke">描邊效果</h1> </body>
6、3d效果
3D文字效果運用原理就是像Photoshop一樣,我們在文字的下方或上方複製了多個圖層,並把每一個層向左上或右下方向移動一個1px距離,從而製作 出3D效果。同時我們層數越多,其越厚重。換成用text-shadow製作就是使用多個陰影,並把陰影色設定相同,給其使用rgba色效果更佳。
<style type="text/css"> .threeD { background-color: #666666; color: #fff; text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8); } </style> <body> <h1 class="threeD">3D效果</h1> </body>
三、資源連結
http://www.cnblogs.com/lhb25/archive/2013/01/31/css3-text-shadow.html
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow