css3 text-shadow_html/css_WEB-ITnose-HTML Tutorial-php.cn

css3 text-shadow_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:30

Original

1601 people have browsed it

1. text-shadow

text-shadow: h-shadow v-shadow blur color;

Copy after login

text-shadow: 水平阴影 垂直阴影 模糊半径 color;

Copy after login

h-shadow and v-shadow can take negative values, blur can only take positive values.

2. Use

1. Basics

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

Copy after login

2. Relief effect

To use the relief effect, the blur value must be Set to 0 to add texture.

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

Copy after login

3. Blur effect

Use text-shadow to create a blur effect. Note: Set the foreground color of the text to transparent. That is, transparent, the larger the blur value, the blurr the effect.

<style type="text/css">.relief{/*  color: #ccc;*/color: transparent;   text-shadow: 0 0 5px #f96;}</style><body><h1 class="relief">模糊效果</h1></body>

Copy after login

4. Concave effect

Note: The foreground color of the text is darker than the background color. The shadow color should be slightly lighter than the background color. This step is very important. If the shadow color is too bright, it will look strange. If it is too dark, it will have no effect.

The inset effect is a shadow effect of text, which is also a common effect and gives a subtle highlighting effect.

<style type="text/css">.inset{ color: #566F89;  background: #C5DFF8;  text-shadow: 1px 1px 0 #E4F1FF;}</style><body><h1 class="inset">内凹效果</h1></body>

Copy after login

5. Stroke effect

Principle: Use two shadows, one upper left and one lower right, without blur value .

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

Copy after login

6. 3D effect

The principle of application of 3D text effect is just like Photoshop, we copy below or above the text Multiple layers and move each layer 1px to the upper left or lower right to create a 3D effect. At the same time, the more layers we have, the thicker it will be. Instead of using text-shadow, you need to use multiple shadows and set the shadow color to the same color. Using rgba color for it will have a better effect.

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

Copy after login

3. Resource link

http://www.cnblogs.com/lhb25/archive/2013/01/31 /css3-text-shadow.html

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow