CSS 技能测试：创建精美的信纸

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

题目链接

题目要求：

  • 把 CSS 链接到 HTML 文档里。

  • 给信纸添加这样一个背景：

    • 把之前下载的顶部图片固定到信纸顶部。

    • 把之前下载的底部图片固定到信纸底部。

    • 为了给信纸一点纹理，在前面背景的基础上添加一个半透明的渐变，使其在顶部和底部附近稍微变暗，但中间的大部分完全透明。

  • 多添加一个background声明，仅添加顶部图片到信纸顶部，以此作为不支持之前那种声明方式的浏览器的后备方案。

  • 给信纸添加一个白色的背景颜色。

  • 给信纸添加一个 1mm 的上下实线边框，选一个符合信纸的颜色主题的边框颜色。

  • 把之前下载的标志图片添加为 <h1> 的背景图片。
  • 给标志添加一个过滤器，使它有一个隐隐约约的阴影。
  • 现在把添加的过滤器注释掉，尝试用其他（更跨浏览器兼容）的方式实现一个相同的阴影，阴影需要同样符合圆形图片的形状。

HTML 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fancy letterheaded paper</title>
    <link rel="stylesheet" href="style.css"> 
    
  </head>
  <body>

    <article>
      <h1>Awesome<br>Company</h1>

      <address>
        <p>The Awesome Company</p>
        <p>102-112 Frail Bend Bridge<br>
        The Dwindlings<br>
        Little Hornet<br>
        HX3 9ZQ<br>
        UK</p>
      </address>
    </article>
  </body>
</html>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  
}

body {
  margin: 0;
  background: #ccc;
}

article {
  width: 210mm;
  height: 297mm;
  margin: 20px auto;
  position: relative;
  background-image: url(top-image.png),url(bottom-image.png),
  linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(0,0,0,0.2) 100%);
  background-position: top,bottom,center;
  background-repeat: no-repeat;
  background-color: white;
  border-top: 1mm solid red;
  border-bottom: 1mm solid red;
}

address {
  position: absolute;
  bottom: 8mm;
  right: 20mm;
}

h1 {
  position: absolute;
  top: 12mm;
  left: 20mm;
  width: 128px;
  height: 128px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  padding: 44px 0;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-image: url(logo.png);
  filter: drop-shadow(5px 5px 5px black);
}