2021-02-25

HTML+CSS3盒子-文字阴影

** 一. HTML+CSS3盒子-文字阴影**
box-shadow:是你个css3的一个新属性,用来实现阴影效果,阴影分为内阴影和外阴影两个效果,可以通过逗号添加多个阴影效果。
box-shadow阴影用法

box-shadow: inset offset-x offset-y blur-radius spread-radius color,....;

box-shadow代码解析

  1. inset
    有inset则为内阴影,没有inset则为外阴影,默认为外阴影。
  2. offset-x
    横向阴影的大小,正值阴影在右边,负值阴影在左边,0的时候阴影中盒子后面,看不见的,如果 有blur-radius值会有模糊效果。
  3. offset-y
    纵向阴影的大小。值同offset-x。
  4. blur-radius
    阴影模糊程度,值越大。阴影越模糊。
  5. spread-radius
    阴影的扩大缩小,正值时,阴影扩大;负值时,阴影缩小,默认为0,和 盒子同样大。
.Box Shadow {
	width: 100px;
	height: 100px;
	background-color: pink;
	box-shadow: 10px 10px 10px -4px rgb(0,0,0, .3);
}

效果如下↓
2021-02-25
二. 文字阴影
text-shadow用法介绍

text-shadow: 5px 5px 5px #000;

对应着上面4个数值
x轴(可正可负) y轴(可正可负) 模糊距离(正值) 阴影颜色

.text shading {
	text-shadow: 3px 3px 3px #000;
}

效果如下↓
2021-02-25
注意
正值使阴影往右/下移动,负值往左/上移动
阴影的颜色是可选的,如果颜色没填,就使用从父级继承的颜色。然而,在不同的浏览器下可能 会有所不同

上一篇:CSS实现3D书本效果


下一篇:css: box-shadow