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.

工程概要

你的任務是創(chuàng)建一個酷的，奇特的盒子，并探索我們可以有什么有趣的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 。 嘗試練習第一 - 沒有什么可以通過作弊獲得！