A cool looking box

初始点

要开始评估，您应该:

• Make local copies of the starting HTML and CSS — save them as index.html and style.css in a new directory.

工程概要

你的任务是创建一个酷的，奇特的盒子，并探索我们可以有什么有趣的CSS。

一般任务

• Apply the CSS to the HTML.

为盒子造型

我们希望您对所提供的 。"> < p> ，并提供以下内容:

• A reasonable width for a large button, say around 200 pixels.
• A reasonable height for a large button, centering the text vertically in the process.
• Centered text.
• A slight increase in font size, to around 17-18px computed style. Use rems. Write how you worked the value out in a comment.
• A base color for the design. Give the box this color as its background color.
• The same color for the text; make it readable using a black text shadow.
• A fairly subtle border radius.
• A 1 pixel solid border with a color similar to the base color, but a slightly darker shade.
• A linear semi-transparent black gradient that goes towards the top left corner. Make it completely transparent at the start, gradiating to around 0.2 opacity by 30% along, and remaining at the same color until the end.
• Multiple box shadows. Give it one standard box shadow to make the box look slightly raised off the  page. The other two should be inset box shadows — a semi transparent white shadow near the top left and a semi transparent black shadow near the bottom right, to add to the nice raised 3D look of the box.

例子

以下屏幕截图显示了完成的设计可以是什么样子的示例:

>

评定

如果您作为有组织课程的一部分参加此评估，您应该能够将您的工作交给您的老师/导师进行标记。 如果您是自学习的，那么您可以轻松地通过 dev-mdc 邮件列表，或者在 #mdn IRC频道中。 org / IRC"class ="external"> Mozilla IRC 。 尝试练习第一 - 没有什么可以通过作弊获得！