text-shadow,box-shadow使用

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

  1. h-shadow :水平方向阴影位置。正值表示向右,负值表示向左。  必须
  2. v-shadow:垂直方向阴影位置。正值表示向下,负值表示向上。   必须
  3. blur:         模糊距离。                                                                    可选
  4. color:        阴影的颜色。                                                                可选
当有多个效果叠加的时候用“,”分割。
该属性可以做一些字体特效
例1:
h1
{
color:white;
text-shadow:3px 3px 10px #ff00ff;
}

Text-shadow的字体效果


效果如图:

网上也会看到一些很炫的“火”形字体,
例2:
 
 

    text-shadow
 


text-shadow,box-shadow使用_第1张图片

二、box-shadow: h-shadow v-shadow blur spread color inset;
    1、h-shadow: 水平阴影的位置,可负值,必需
    2、v-shadow: 垂直阴影的位置,可负值,必需
    3、blur:          模糊距离,可选
    4、spread: 阴影的大小,可选
    5、color :阴影的颜色,可选
    6、inset/outset :outset为默认值,表示外层阴影;inset表示内侧阴影,可选
   box-shadow为box框设置样式。
例1:


text-shadow,box-shadow使用_第2张图片

你可能感兴趣的:(css样式)