CSS 技能测试：一个漂亮的盒子

发表于
在 MDN 文档学习 CSS 的记录

题目链接

题目要求：

  • 一个对于大按钮来说合理的宽度，200 像素左右。
  • 一个对于大按钮来说合理的高度，并使文本纵向居中。
  • 居中文本。
  • 用 rem 使字体稍大一点，大约 17-18 像素，在注释里说说你的值是怎么算出来的。
  • 给你的设计定一个基础颜色，把它作为盒子的背景颜色。
  • 把字体颜色设为同一个颜色，使用黑色的文字阴影增加可读性。
  • 一个精巧的圆角边框。
  • 一个跟基础颜色相近、1 像素宽的实线边框，颜色要稍深一点。
  • 一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在 30% 的处渐变到 0.2 的不透明度，然后保持相同颜色到最后。
  • 多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的 3D 外观。

HTML 代码：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Cool box</title>
    <link rel="stylesheet" href="style.css"> 
  </head>
  <body>
      <div>This is a cool box</div>
  </body>
</html>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html {
  font-family: sans-serif;
}

/* Your CSS below here */
div {
  width: 200px;
  height: 160px;
  text-align: center;
  line-height: 160px;
  font-size: 1.2rem;
  color: white;
  text-shadow: 2px 2px 2px black;
  border-radius: 10px;
  border: 1px solid orange;
  background: linear-gradient(115deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.2) 100%);
  background-color: rgb(255, 230, 0);
  box-shadow: 5px 5px 5px black,inset 3px 3px 3px rgb(255,255,255,0.5),inset -3px -3px 3px rgb(0,0,0,0.5);
}