box-shadow学习笔记整理

最新推荐文章于 2024-03-16 20:30:23 发布

原创最新推荐文章于 2024-03-16 20:30:23 发布 · 384 阅读

CC 4.0 BY-SA版权

文章标签：

50 篇文章

订阅专栏

30 篇文章

订阅专栏

本文介绍了CSS属性box-shadow的使用技巧，包括如何通过调整offset、blur-radius等参数实现不同位置及大小的阴影效果，并提供了实现单独一侧投影、邻边投影、双侧投影和盒子投影的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);

这里写图片描述