box-shadow实现不同角度的投影

zojay

zojay

发表于 2016-10-31 20:12:25
内容来源: 网络

先看看看box-shadow的参数说明:

h-shadow 水平阴影的位置。允许负值。
v-shadow 垂直阴影的位置。允许负值。
blur 模糊距离
spread 阴影的尺寸

为了实现不同角度的投影,需要借助四个参数。核心原理是将模糊的距离加大,将阴影的尺寸减小

顶部投影

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 0 -5px 5px -5px;

右侧投影

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 5px 0 5px -5px;

底部投影

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 0 5px 5px -5px;

左侧投影

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 200px ;
box-shadow: #000 -5px 0 5px -5px;

双边投影

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px #000;

内容来源:https://segmentfault.com/a/1190000007314275

相关帖子
用户评论
开源开发学习小组列表