【css】css中的盒子阴影与文字阴影

box-shadow 盒子阴影

box-shadow: x y blur spread color type;

• x 轴偏移量 正值向右，负值向左
• y 轴偏移量 正值向下，负值向上
• blur阴影大小（模糊程度）
  只可为正值，值越大阴影的边缘就越模糊
• spread 阴影扩展:阴影开始模糊的位置，可为负值
• color 阴影颜色
• type 阴影投射方式
  外阴影 outset（默认）
  内阴影 inset

示例1

box-shadow: 0 3.5px 7px 3px #3F78f8;

示例	效果图	chrome详解图
box-shadow

示例2

div {
	box-shadow: 0 8px 8px rgba(202,12,22,.24), 0 0 8px rgba(202,12,22,.12);
}

示例	效果图
box-shadow

text-shadow 文字阴影

text-shadow: x y blur color;

• x 轴偏移量 正值向右，负值向左
• y 轴偏移量 正值向下，负值向上
• blur 模糊半径，正值，从出现到消失的长度
• color 阴影颜色
• 支持阴影叠加

示例

p {
	text-shadow: 5px 5px 20px red, 15px 15px 20px orange; 	
}

示例	效果图
text-shadow