5-阴影

引例

box-shadow:2px 3px 4px rgba(0,0,0,.5);

绘制原理:
5-阴影

  • 以该元素相同的尺寸和位置,画一个rgba(0,0,0, .5)的矩形
  • 向右移2px;向下移3px
  • 使用高斯模糊算法进行4px模糊处理
  • 模糊后的形状与原始元素的交集会被切除掉

单侧阴影

div {
	width: 100px;
	height: 100px;
	background: orange;
	box-shadow: 0 5px 4px -4px black;
}

使用4px的模糊班级意味着投影的尺寸会比元素本身大约8px。然而这会导致外露的阴影太浓重。解决方案是使用第四个长度参数,称为扩张半径。举例来说,一个-4px的扩张半径会把阴影的宽度和高度的边减小4px

邻边阴影

div {
	width: 100px;
	height: 100px;
	background: orange;
	box-shadow: 3px 3px 6px -3px black;
}

双侧投影

div {
	width: 100px;
	height: 100px;
	background: orange;
	box-shadow: 5px 0 5ps -5px black,
                -5px 0 5px -5px black;
}

不规则阴影

对于矩形或使用了border-radius的图形,box-shadow可以完美地添加阴影。而对其他添加了伪元素或半透明装饰的图形,box-shadow就显得力不从心。这些情况包括:半透明图像、背景图像、border-image、点状、虚线或半透明的空边框、气泡、切角、clip-path生成的形状如菱形。
5-阴影

方法:滤镜效果

上一篇:CSS盒模型


下一篇:CSS盒模型