css3 text-shadow

admin發表於2018-07-20
CSSS3

一、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

 

相關文章