1. 文本阴影text-shadow
text-shadow属性
还没有出现时,大家在网页设计中阴影一般都是用photoshop
做成图片- 现在有了
css3
可以直接使用text-shadow属性
来指定阴影 - 这个属性可以有两个作用:
产生阴影
和模糊主体
。 - 这样在不使用图片时能给
文字增加质感
- 语法:
text-shadow :x轴偏移 y轴偏移 模糊距离 阴影颜色; // (必须)x、y轴取正负值 如5px、-5px // (可选)模糊距离必须取正值如:5px // (可选)阴影颜色为色值,也可以是rgba透明色 // 可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。
2. 盒子阴影box-shadow
-
box-shadow 属性
向边框添加一个或多个阴影 -
语法:
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外部阴影;
-
属性:
1. h-shadow(必需):水平阴影位置。允许负值如:5px 2. v-shadow(必需):垂直阴影位置。允许负值如:-5px 3. blur(可选):模糊距离,必须取正值如:5px 4. spread(可选):阴影尺寸,值越大阴影的扩散面积越大,默认值为0px 5. color(可选):阴影颜色 6. 内/外部阴影(可选):外部阴影outset(默认值) 内部阴影inset
-
注意:
1. 一般跟文字阴影一样写四个值即可:水平 垂直 模糊 颜色 2. 前面两个属性是必须写的,其余的可以省略 3. 外阴影为默认的(outset)但是不能写, 想要 内阴影就