最新消息:你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

css单边投影与双侧投影

表现 练小习 0评论

早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗?
他说来不及翻书了,项目比较急上来问一下。
我顿时觉得真是暴殄天物了。看到下面有几个人都在问,于是直接写了几个demo发出去。
不想学习的借口有很多,没有时间是比较低级的一个。

box-shadow做单边投影的核心是第四个参数 扩张半径,这个参数会根据你指定的值去扩大或缩小投影尺寸,如果我们用一个负的扩张半径,而他的值刚好等于模糊半径,那么投影的尺寸就会与投影所属的元素尺寸完全一致,除非使用偏移量来移动他,否则我们将看不到任何投影。

因此,如果此时给予一边一个正的偏移,你就会在该侧看到单边投影的效果。

顶部单边投影:

box-shadow: #000 0 -5px 5px -5px;

提示:你可以先修改部分代码再运行。

底部单边投影:

box-shadow: #000 0 5px 5px -5px;

提示:你可以先修改部分代码再运行。

左侧单边投影:

box-shadow: #000 -5px 0 5px -5px;

提示:你可以先修改部分代码再运行。

右侧单边投影:

box-shadow: #000 5px 0 5px -5px;

提示:你可以先修改部分代码再运行。

如果我们想在两侧投影:

box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px #000;

提示:你可以先修改部分代码再运行。

转载请注明:练小习的前端技术笔记 » css单边投影与双侧投影

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址