美文网首页
15、单侧投影

15、单侧投影

作者: Elevens_regret | 来源:发表于2017-04-10 17:30 被阅读0次

box-shadow属性的第四个参数扩张半径还可以接受负数。指定为负数时,它会相应的缩小投影的尺寸。一个-5px的扩张半径会让投影的4个边都减少5px的大小。所以,当模糊半径的大小与扩张半径的大小相互抵消(一个为正一个为负,绝对值相等),并且X与Y方向的偏移量都为0时,将完全看不到投影。利用这一特点,只给X或者Y起中一个方向给偏移量,就可以实现单侧投影。

box-shadow: 0 10px 10px -10px rgba(0,0,0,.8);

当扩张半径为模糊半径的一半且为负值时,可以将相邻的两侧阴影显示,并将另外两侧的阴影隐藏起来。注意此时扩展半径要和偏移量完全抵消才能完全隐藏阴影

box-shadow: 10px 10px 20px -10px rgba(0,0,0,.8);

当要实现双侧投影时,因为扩张半径在4个方向上的抵消量都是相同的,所以只用一层阴影无法实现,可以利用两次单侧阴影的技巧,让两个阴影叠加在同一元素上。

box-shadow: 10px 0 10px -10px rgba(0,0,0,.8),
            -10px 0 10px -10px rgba(0,0,0,.8);

相关文章

  • 15、单侧投影

    box-shadow属性的第四个参数扩张半径还可以接受负数。指定为负数时,它会相应的缩小投影的尺寸。一个-5px的...

  • CSS中的视觉效果

    1.单侧投影 重点:box-shadow的第四个长度参数,扩张半径。 单侧投影: 邻边投影: 双侧投影: 2.不规...

  • 《CSS 揭秘》- 视觉效果 - 第四章

    单侧投影 http://dabblet.com/gist/cc055dadf493c15723cf 邻边投影 ht...

  • 单侧酒窝

    刚刚看了看了一位简友的文章,说起了关于酒窝的传说,想念你还有你的单侧酒窝。 贴一篇旧文,权作纪念。 传说中的酒窝是...

  • 单侧体式是重要的生存技能。

    单侧体式,又可以称为平衡类体式。因为我们生活中经常进行着单侧活动,走路、跑步、踢球等等,所以单侧体式是重要的生存技...

  • 自己练习课程2

    目的:核心肌群+背部 平衡交换肘支撑起来,单侧手8次 单腿10--15次 左右交叉为一次,20次 高位下拉的器械,...

  • 麻醉床

    )操作步骤 ①撤除原有枕套、被套、大单。 ②同备用床铺好一侧大单。 ③根据病情铺同侧橡胶单、中单,先铺床中部;如需...

  • 这样的锻炼方法才能最有效的矫正你的高低肩

    两脚开立,与肩同宽,上体直立,低肩侧手持哑铃或重物做单臂耸肩,另一侧手叉腰。重复10~15次,练习4组。这样的锻炼...

  • 11统计基础- 计算P值

    计算P值 有两种p值,单侧和双侧。双侧p值是最常见的,重点是计算它们。相反,单侧p值是很少被使用。 p-value...

  • 挑水村姑(绘画:瑾)

    朝霞谁伴小河边, 粗布红巾扁担尖。 侧桶弯身投影处, 涟漪日日荡依然。

网友评论

      本文标题:15、单侧投影

      本文链接:https://www.haomeiwen.com/subject/ubteattx.html