嵌入框阴影在填充矩形时隐藏

是指在使用CSS样式设置矩形元素的背景填充颜色时，嵌入框阴影效果被隐藏起来。

嵌入框阴影是一种常见的UI设计效果，通过为元素添加阴影效果可以增加元素的立体感和层次感，使页面更加美观和吸引人。然而，在某些情况下，当我们为矩形元素设置背景填充颜色时，嵌入框阴影效果可能会被隐藏起来，无法显示出来。

这种情况通常是由于CSS的绘制顺序导致的。在CSS中，元素的背景填充是在元素的内容之下绘制的，而嵌入框阴影是在元素的边框之外绘制的。当我们为矩形元素设置背景填充时，填充颜色会覆盖住嵌入框阴影，导致阴影效果被隐藏。

为了解决这个问题，我们可以通过以下几种方法来实现嵌入框阴影在填充矩形时不被隐藏：

使用伪元素：可以通过为矩形元素添加一个伪元素，并将伪元素的背景填充颜色设置为透明，然后为伪元素添加嵌入框阴影效果。这样，阴影效果就会在填充颜色之上显示出来。示例代码如下：

.rectangle {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #fff;
}

.rectangle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: transparent;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

使用outline属性：可以将矩形元素的背景填充颜色设置为透明，并使用outline属性为元素添加边框，并设置边框的颜色和阴影效果。这样，阴影效果就会在填充颜色之上显示出来。示例代码如下：

.rectangle {
  width: 200px;
  height: 100px;
  background-color: transparent;
  outline: 10px solid rgba(0, 0, 0, 0.5);
}

使用box-shadow和inset属性结合：可以将矩形元素的背景填充颜色设置为透明，并使用box-shadow属性为元素添加外部阴影效果，然后使用inset属性为元素添加内部阴影效果。这样，阴影效果就会在填充颜色之上显示出来。示例代码如下：

.rectangle {
  width: 200px;
  height: 100px;
  background-color: transparent;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
}

以上是三种常见的解决方法，根据具体的需求和场景选择合适的方法即可。在腾讯云的产品中，可以使用腾讯云云服务器（CVM）来搭建网站或应用程序，使用腾讯云对象存储（COS）来存储和管理文件，使用腾讯云内容分发网络（CDN）来加速网站访问，使用腾讯云数据库（TencentDB）来存储和管理数据等。具体产品介绍和链接地址可以参考腾讯云官方网站。