box-shadow学习笔记整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wjnf012/article/details/80323488

box-shadow不用多说,大家都知道是给元素设置阴影的,但是使用过程中有很多有意思的技巧。

定义

box-shadow是以逗号分隔列表来描述一个或者多个阴影效果。同时如果设置了border-radius,阴影同样对圆角生效。如果同时设置了多个阴影,那么第一个在最上面,以此类推。

初始值:none
适用于所有元素,包括伪类
继承性:无

语法

box-shadow:inset? <offset-X> <offset-Y> <blur-radius> <spread-radius> <color>
                                   \可以不设置/     \可以不设置/
  • inset: 默认阴影在边框外,使用inset后,阴影在边框内,背景之上内容之下
  • <offset-X> <offset-Y> : 设置阴影的水平偏移量(负值位于元素左边)和垂直偏移量(负值位于元素上边),<length>值。
    如果两者都是0,那么阴影位于元素的后面。如果设置了blur-radius或者spread-radius,则有阴影效果。
  • blur-radius: <length>,值越大,模糊面积越大,阴影越大越淡。不能为负值,默认为0,此时阴影边缘表现为锐利。
  • spread-radius <length>,取正,阴影扩大;取负,阴影缩小。默认为0,此时阴影与元素一样大。
  • <color>:阴影颜色,可以是各种颜色表达,rgb()/rgba()/hsl()/hsla()/hex-color/named-color/currentColor/deprecated-system-color

兼容性

chrome IE firefox safari opera android IOS
10.0+支持-webkit前缀,经测试,63.0支持无前缀 9.0+ 3.5/4.0+支持-moz-前缀,经测试59.0.3支持无前缀 3.0支持-webkit-前缀,5.1+支持无前缀 10.5+ 支持-webkit-前缀 支持-webkit-前缀,经测试,7.0支持无前缀

示例:实现单独一侧投影

注:利用扩张半径缩小投影的尺寸

box-shadow: 0 5px 4px -4px red;

这里写图片描述

示例:实现邻边投影

注:设置扩张半径时,值不应该是模糊半径的相反值,只需要把阴影藏进一侧,另一侧自然露出就好。

box-shadow: 4px 4px 8px -4px red;

这里写图片描述

示例:实现双侧投影

注:因为扩张半径在四个方向的作用是均等的,因此我们无法一次性完成,只能分成两块来实现。

box-shadow: 0 4px 4px -4px red,
            0 -4px 4px -4px red;

这里写图片描述

示例:盒子投影

可以制作盒子投影等类似的效果,此处只是粗略示意,有点丑*^_^*

box-shadow: 4px 4px 8px -2px #0fb8eb,
            4px 4px #046380,
            10px 10px 20px 0 rgba(0,0,0,0.8);

这里写图片描述

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页