在
网站建设过程中框阴影在CSS中相当简单:声明box-shadow属性，设置阴影偏移量，定义范围，并给它一个颜色。这是一个给原本扁平的设计增加深度的好方法。
想象box-shadow但是对于模糊效果，元素周围的背景会变得模糊，从而逐渐降低模糊的强度。试图提高一个黑暗区域的弹出窗口的对比度box-shadow从设计角度来说，弹出窗口没有多大意义。 如果我们有一个box-blur财产或者是某种blur我们可以设置的关键字box-shadow我们为之努力的方式inset阴影。不幸的是，CSS没有这样的属性。但是因为CSS很棒，很灵活，我们仍然可以通过组合一些CSS功能来实现这种效果。
该效果的处理方式是将其应用于::before一些元素的伪元素，比如一些弹出窗口/对话框/弹出窗口/工具提示。这些是这种效应的常见“目标”。我认为在这里使用伪元素是一个好方法，因为这意味着我们可以在技术上为伪元素确定样式的范围，并在不改变HTML的情况下重新调整对其他元素的影响。
梯度在技术上形象—由浏览器生成—可用作CSS遮罩来隐藏元素的某些部分以创建各种形状。在这种情况下，这是完美的，因为我们希望效果更强，更接近对象，并随着对象的远离而减弱强度。我们将使用两种渐变:一种是水平渐变，另一种是垂直渐变。我选择这条路线是因为它模仿了一个向边缘淡出的大致矩形形状。
正如我们所说，透明度是关键。两种梯度都开始transparent，然后过渡到black直到最后一刻，他们回到了transparent淡化事物。记住，这些梯度是面具而不是背景图像，因此它们是在mask属性，该属性控制应该呈现哪些像素及其不透明度。
