CSS 盒子阴影答案

【问题标题】：CSS Box ShadowsCSS 盒子阴影
【发布时间】：2019-05-10 19:50:24
【问题描述】：

谁能帮我解决我在下面的 CSS 代码中做错了什么，我想学习，我想制作所附图像中的内容。指令是：风格：

宽度：400 像素，
高度：100 像素，
背景颜色：米色，
阴影 - 居中，5 px 模糊，5 px 阴影宽度，颜色 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)}

谢谢

【问题讨论】：

您的盒子阴影属性定义不正确。您需要为数字使用单位，即inset 5px 5px 5px...
我附上了一张图片，但我不知道id怎么了，我在Imgur上发了一个新帖子imgur.com/gallery/jMudhd5，我把5改成了px。阴影仅在两侧且 txt 未居中我认为是“从顶部移动 20px 的文本”部分
如果阴影居中，则前两个值为 0 ，即为 0 0 5px 5px rgba(0,0,0,0.3) developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Syntax

标签： css box-shadow

【解决方案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 像素的要求。我相信这有你需要的一切。

【讨论】：

非常感谢您的回答
不客气。如果有帮助，请不要忘记将其标记为答案。祝你好运

【解决方案2】：

尝试： box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);

【讨论】：