15、单侧投影

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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,343评论 0 1
  • 精简CSS 代码如何精简?从简单例子弹起,最简单的一个btn.btn{ padding:4px 10px; ...
    debt阅读 397评论 0 0
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,776评论 0 7
  • 我对任何美的东西都会本能地生出一种爱,在CSS的世界里,凡和色彩渐变等沾边的属性都是我的菜。因此box-shado...
    张歆琳阅读 6,907评论 6 33
  • “好吃不过饺子”,这句话太熟悉了,可是要真的包出好吃的饺子,拌馅儿调馅儿才是关键,有的人说不爱吃饺子,那估计是从来...
    诗桦阅读 2,583评论 28 43

友情链接更多精彩内容