具有分层框、更平滑的Css阴影效果

更新日期: 2023-06-02阅读: 1.4k标签: 阴影

当光线照射到物体上并投射出阴影时,阴影会呈现出无数独特的特征。如果你试图用 then 捕捉真实阴影的微妙之处box-shadow,那么,你就很不走运了。cssbox-shadow属性并不是为了鼓励表现力而构建的。它实质上会产生对象的模糊轮廓——您可以更改其偏移量、模糊半径、扩散和颜色,仅此而已。我们无法接近表达现实生活中阴影的复杂性和细微差别。

但是通过简单的 CSS 技术,我们可以扩展我们的选择范围。如果我们使用 layered box-shadows,我们可以更细粒度地控制阴影的渲染方式:

box-shadow
0 6px 6px rgba(0,0,0,0.2);
Layered box-shadows
gradually increasing offset/blur

看看与分层box-shadow效果(第二个框)相比,默认效果box-shadow(第一个框)看起来多么方形和笨拙。我们可以通过创建多个box-shadows(用逗号分隔每个阴影)并增加每个阴影的偏移和模糊来实现此效果(语法box-shadow为X-offset Y-offset blur color):

/* Default box-shadow */
.box {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Create smoother box-shadows by layering multiple
* shadows with gradually increasing radius and offset */
.shadow-5 {
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
}

这种简单的分层技术使我们能够更好地控制阴影的渲染,我们可以用它来微调锐度、距离和扩散。例如,您可以增加或减少阴影的数量以创建更小或更大的扩散。(请注意,如果您增加层数,如果您希望保持强度相同,则必须降低每层的 alpha 值。)

Layered box-shadows
4 shadows with 15% alpha
Layered box-shadows
6 shadows with 11% alpha

css代码如下:

.shadow-4 {
box-shadow: 0 1px 1px rgba(0,0,0,0.15),
0 2px 2px rgba(0,0,0,0.15),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.15);
}

.shadow-6 {
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 8px 8px rgba(0,0,0,0.11),
0 16px 16px rgba(0,0,0,0.11),
0 32px 32px rgba(0,0,0,0.11);
}

控制清晰度就像控制扩散一样简单,但是我们可以同时使用每层的alpha值和模糊值来分别改变深度的浓度和阴影的模糊半径。

上面的示例对所有图层使用相同的 alpha 值,但我们可以让 alpha 值随着每一层而减少或增加,以创建或多或少的漫射阴影。对于下面更集中的阴影,最里面的阴影(偏移和模糊最少)具有最高的 alpha 值,并且随着每一层的增加而减小。对于第二个盒子的更漫射阴影,情况正好相反,其中最内层具有最低的 alpha 值:

Sharp
Shadows with decreasing alpha
Diffuse
Shadows with increasing alpha

css代码如下:

.blog-shadow-sharp {
box-shadow: 0 1px 1px rgba(0,0,0,0.25),
0 2px 2px rgba(0,0,0,0.20),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.10),
0 16px 16px rgba(0,0,0,0.05);
}

.blog-shadow-diffuse {
box-shadow: 0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.16),
0 8px 8px rgba(0,0,0,0.20);
}

我们还可以增加blur更高的增量,以增加传播并创造更柔和、几乎梦幻的效果:

Dreamy soft
Higher blur increase

css代码如下:

.blog-shadow-dreamy {
box-shadow: 0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
}

最后,我们可以通过解耦模糊半径和 Y 偏移来控制距离,并以更大或更小的增量增加偏移:

Shorter
Shadows with smaller distances
Longer
Shadows with larger distances

css代码如下:

.shadow-shorter {
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 6px 8px rgba(0,0,0,0.11),
0 8px 16px rgba(0,0,0,0.11);
}

.shadow-longer {
box-shadow: 0 2px 1px rgba(0,0,0,0.09),
0 4px 2px rgba(0,0,0,0.09),
0 8px 4px rgba(0,0,0,0.09),
0 16px 8px rgba(0,0,0,0.09),
0 32px 16px rgba(0,0,0,0.09);
}

使用所有这些技术的哪种组合当然在很大程度上取决于您所处的环境,但是使用分层阴影我们至少可以获得更多控制以帮助我们实现所需的外观和感觉。

翻译来自:https://tobiasahlin.com/blog/layered-smooth-box-shadows/

链接: https://www.fly63.com/article/detial/12497

CSS阴影效果的比较:drop-Shadow与box-Shadow

drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影

css实现不规则图形的阴影(如对话框)

在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的,这样box-shadow属性可能不能满足需求。这里推荐一个类似的属性,filter下的drop-shadow。

CSS 阴影动画优化技巧

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)

CSS中使用文本阴影与元素阴影

在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影、垂直阴影、(清晰度或模糊距离)、阴影颜色。text-shadow属性值说明,在文本阴影实践中:第一个值是设置阴影水平方向移动

css怎么设置阴影边框?

在CSS中可以使用阴影效果属性在HTML文档中添加边框(图像)阴影。下面本篇文章就来给大家介绍一下CSS的阴影效果属性,CSS添加阴影效果的方法

CSS怎么添加阴影边框?

css怎么设置边框阴影?很多人遇到这类问题都不知道怎么处理,其实利用css加阴影边框是很简单的。在CSS中可以使用box-shadow属性或filter属性的drop-shadow()来添加阴影边框。

css边框阴影怎么设置?

我们在网页设计中,通常会使用ps工具来达到图片或者边框阴影、立体等效果。但是如果一些基础效果都需要用p图来完成那就显得效率比较低了。其实可以使用CSS来设置边框阴影,下面本篇文章来给大家介绍一下。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!