CSS学习笔记:text-shadow

来源:互联网 发布:linux php.ini 编辑:程序博客网 时间:2024/05/20 05:46

概述

text-shadow 为文字添加阴影。

  • 可以为文字与 text-decorations 添加多个阴影,阴影值之间用逗号隔开。
  • 要为每个阴影指定相对文字的偏移量,可选的颜色及模糊半径。
  • 多个阴影从前往后叠加,第一个阴影在最前面。
  • 可以应用在::first-line和::first-letter伪元素上

语法

text-shadow:offset-x | offset-y | blur-radius | color 
  • offset-x ,offset-y:必选。这些长度值指定阴影相对文字的偏移量。
    • offset-x指定水平偏移量,若是负值则阴影位于文字左边。
    • offset-y 指定垂直偏移量,若是负值则阴影位于文字上面。

如果两者均为0,则阴影位于文字正后方(如果设置了 blur-radius 则会产生模糊效果)。

  • blur-radius:可选。代表模糊半径,如果没有指定,则默认为0。值越大,模糊半径越大,阴影也就越大越淡
  • color:阴影的颜色。可以在偏移量之前或之后指定。

例子

.text-shadow {   text-shadow: rgba(0,0,0,0.5) 0 -2px 2px;}

这里写图片描述

多阴影:

.text-shadow {   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;}

这里写图片描述

0 0
原创粉丝点击