大家好！
在现代设计中，创建站点和应用程序时，许多开发人员都会应用深度和体积的效果，通常将此类CSS属性称为
box-shadow和
drop-shadow 。 有人认为，这是
2018年的趋势。 确实，外国和俄罗斯的许多网站都在2018年开始更频繁地应用阴影。
在这方面，最近出现了一些
简单且令人愉悦的CSS阴影集合，这些阴影经常在网站上找到（侧面加减2个像素）。 该集合称为
Box-shadows.css 。 她已经在网络上获得了积极的评价，并且最近已更新到1.0.4版，其中出现了一些更漂亮的阴影，分为几组。
在上次更新之后，该集合开始包含60多个有关阴影的选项，这些选项非常适合在表中使用，用于网站首页，容器，导航栏和站点其他块的内容。
创建此收藏集的主要目的是促进新手Web设计师和开发人员创建令人愉悦和现代的设计。 多亏了这个集合，您可以简化使用块的工作，并减少在生成器中选择css阴影的时间（顺便说一下，这也是可用的）。 当然，经验丰富的开发人员不太可能需要它，但是也许他们可以自己学到一些有趣的东西。 该集合对于那些尚未完全研究布局，但想要在其站点的按钮，块和容器上创建漂亮阴影的人很有用。
连接样式
要连接样式表，请访问
项目网站并下载所需的文件。 然后，通过方便的方法，在<head>标记后，将文件附加到html页面。
<head> <link rel="stylesheet" href="/box-shadows.css"> <link rel="stylesheet" href="/box-shadows.min.css"> </head>
您可以使用
min.css文件
生成器 ，它允许您创建仅包含所选类的自己的文件。 好吧，或者只是选择您需要的块并将您喜欢的阴影复制到您的站点。 如果您的项目使用少于两个或三个阴影，这将有助于减少负载。 只需按照网站上的说明进行操作，您将成功。
使用类
要将所需的阴影连接到块，只需向其添加具有所需编号的
.bShadow类：
<div class="bShadow-54"></div>
悬停效果
要为您的块创建一个悬停效果，请向您喜欢的类添加数字，例如
.bShadow-1，并在该数字后写拉丁字母
h 。 例如：
<div class="bShadow-38 bShadow-1h"></div>
看一下
.bShadow类
示例 。 悬停时，它将阴影值分配给相邻的类
.bShadow-1 。 如果希望在悬停或单击阴影时不显示阴影，请添加
.bSnone类
平滑转换和动画
默认情况下，
.bShadow类在.2s
transition: transform 0.2s ease-in-out使用平滑动画
transition: transform 0.2s ease-in-out easy
transition: transform 0.2s ease-in-out ，还包括一个属性，用于警告浏览器即将发生的阴影和位置变换
will-change: transform, box-shadow; 。
用它制作漂亮的动画块。 例如，您可以使用转换添加类或属性：
.transform-translateY-5:hover { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }
然后，添加到您需要的容器中：
<div class="bShadow transform-translateY-5 bShadow-1h"> </div> ，您将看到
结果添加插入参数
要添加内部阴影参数，只需将脚本粘贴到html页面中，然后指定要为其应用类的类。
例如
.bShadow-1 。 要指定多个类，请用逗号分隔它们，如下例所示。 不要忘记结束课堂！
[].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset " + bsh; });
演示版CSS盒影发生器
该集合还意味着用户自己创建的带有阴影的类的数量增加。 也就是说，您可以使用
经典的阴影生成器以您自己的样式来补充集合。 通过单击“保存并添加下一个”按钮，您可以创建无限多个类。 将为第一个生成的类和后续类分配一个不在集合中的序列号。 可以轻松地将生成的样式复制并粘贴到项目的根css文件中，或粘贴到在收集站点上创建的box-shadows.min.css文件中。
现在我们计划扩展集合并配置npm软件包，但是这样做有一些小困难。 因此，我希望能收到
cdnjs链接和该项目的进一步开发。
GitHubPagePage