您好,欢迎访问一九零五行业门户网

css3 text-shadow_html/css_WEB-ITnose

一、text-shadow
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平阴影 垂直阴影 模糊半径 color;
h-shadow和v-shadow可取负值,blur只能取正值。
二、使用 1、基础 霓虹灯效果的文本阴影文本水平垂直阴影效果白色文本阴影效果
2、浮雕效果 使用浮雕效果,模糊值必须设为0来增加质感。
浮雕效果
3、模糊效果 使用text-shadow制作模糊效果注意一点:把文本的前景色设置为透明,即transparent,模糊值越大效果越模糊。
模糊效果
4、内凹效果 注意:文字的前景色要比背景色暗,阴影颜色稍微比背景色亮一点点,这一步很重要,如果阴影颜色太亮会看起来很怪,如果太暗又没有效果。
inset效果是文本的影子效果,也是一种常见的效果,给人一种微妙的突出效果。
内凹效果
5、描边效果 原理:使用两个阴影,一个左上,一个右下,且不用模糊值。
描边效果
6、3d效果 3d文字效果运用原理就是像photoshop一样,我们在文字的下方或上方复制了多个图层,并把每一个层向左上或右下方向移动一个1px距离,从而制作 出3d效果。同时我们层数越多,其越厚重。换成用text-shadow制作就是使用多个阴影,并把阴影色设置相同,给其使用rgba色效果更佳。
3d效果
三、资源链接 http://www.cnblogs.com/lhb25/archive/2013/01/31/css3-text-shadow.html
https://developer.mozilla.org/en-us/docs/web/css/text-shadow
其它类似信息

推荐信息