一个漂亮的盒子 - 学习 Web 开发编辑

在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。

前提条件：	在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：	测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。

起点

在开始评估之前，你需要：

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。

给<p>添加样式：

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