知优码

您现在的位置是:首页 > WEB相关 > Css样式

Css样式

CSS阴影技巧与细节

知优码 2019-11-09Css样式
最近一个新的项目,CSS-Inspiration,挖掘了其他很多有关 CSS 阴影的点子,是之前的文章没有覆盖到的新内容,而且有一些很有意思,遂打算再起一篇。本文的题目是 CSS 阴影技巧与细节。CS

最近一个新的项目,CSS-Inspiration,挖掘了其他很多有关 CSS 阴影的点子,是之前的文章没有覆盖到的新内容,而且有一些很有意思,遂打算再起一篇。

本文的题目是 CSS 阴影技巧与细节。CSS 阴影,却不一定是 box-shadow 与 filter:drop-shadow,为啥?因为使用其他属性也可以模拟阴影,而且是各种各样的阴影。下面且听我娓娓道来~
dp q2w17km a5m p35

 

单侧投影

先说单侧投影,关于 box-shadow,大部分时候,我们使用它都是用来生成一个两侧的投影,或者一个四侧的投影。如下:

image

OK,那如果要生成一个单侧的投影呢?

我们来看看 box-shadow 的用法定义:

 
 
{
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}

以 box-shadow: 1px 2px 3px 4px #333 为例,4 个数值的含义分别是,x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。

这里有一个小技巧,扩张半径可以为负值。

继续,如果阴影的模糊半径,与负的扩张半径一致,那么我们将看不到任何阴影,因为生成的阴影将被包含在原来的元素之下,除非给它设定一个方向的偏移量。所以这个时候,我们给定一个方向的偏移值,即可实现单侧投影:

image

CodePen Demo -- css单侧投影

  

投影背景 / 背景动画

接着上面的说。

很明显,0 = -0,所以当 box-shadow 的模糊半径和扩张半径都为 0 的时候,我们也可以得到一个和元素大小一样的阴影,只不过被元素本身遮挡住了,我们尝试将其偏移出来。

CSS代码如下:

 
1
2
3
4
5
6
7
div {
    width: 80px;
    height: 80px;
    border: 1px solid #333;
    box-sizing: border-box;
    box-shadow: 80px 80px 0 0 #000;
}

得到如下结果:

image

有什么用呢?好像没什么意义啊。

额,确实好像没什么用。不过我们注意到,box-shadow 是可以设置多层的,也就是多层阴影,而且可以进行过渡变换动画(补间动画)。但是 background-image: linear-gradient(),也就是渐变背景是不能进行补间动画的。

这又扯到哪里去了。好我们回来,利用上面的特性,我们可以利用 box-shadow 实现原本只能利用渐变才能实现的背景图:

image

用 box-shadow,实现它的 CSS 代码如下(可以更简化):

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.shadow {
    position: relative;
    width: 250px;
    height: 250px;
}
 
.shadow::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: -50px;
    left: -50px;
    box-shadow:
        50px 50px #000, 150px 50px #000, 250px 50px #000,
        50px 100px #000, 150px 100px #000, 250px 100px #000,
        50px 150px #000, 150px 150px #000, 250px 150px #000,
        50px 200px #000, 150px 200px #000, 250px 200px #000,
        50px 250px #000, 150px 250px #000, 250px 250px #000;
}

用渐变来实现的话,只需要这样:

 
1
2
3
4
5
6
.gradient {
    width: 250px;
    height: 250px;
    background-image: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%);
    background-size100px 100px;
}

为什么选择更为复杂的 box-shadow 呢?因为它可以进行补间动画,像这样,这是使用渐变做不到的:

bgshadow

CodePen Demo -- box-shadow实现背景动画