CSS Box阴影

Question

有人可以帮助我解决下面CSS代码中我做错的事情吗？我想学习，也想制作所附图像中的内容。 这些说明是： 样式：

• 宽度：400像素，
• 高度：100像素，
• 背景色：米色，
• 阴影-居中，5像素模糊，5像素阴影宽度，颜色rgba（0,0,0,0.3），
• 水平居中的文本，字体大小为50像素，从顶部移动了20像素，字体粗细为700，
• 圆角：20像素。

我的代码

.test {
    width: 400px;
    height: 100px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    box-shadow: inset 5 5 5px rgba(0, 0, 0, 0.3)}

谢谢

Answer 1

.test {
    width: 400px;
    height: 100px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    padding-top: 20px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3)}

添加了padding-top，用于您要求文本从顶部移出20像素。我相信，这还有您需要的所有其他东西。

Answer 2

尝试： box-shadow：嵌入5px 5px 5px rgba（0，0，0，0.3）;