Html 在CSS中重新创建边

我目前正在尝试重新创建OSX Mavericks中的计算器。目前，我只是在研究它的结构和样式

我已经完成了大部分；但是，我在尝试在外部重新创建边缘效果以及按钮和输出屏幕周围的效果时遇到了麻烦

如有任何帮助/指导，将不胜感激

作为占位符，我有自己的edge版本

*
{
字体大小：32px；
框大小：边框框；
保证金：0；
填充：0；
}
.计算器
{
溢出：隐藏；
宽度：417px；
高度：自动；
保证金：100像素自动；
填充：20px 20px 9px；
/*临时斜边*/
方框阴影：0-1px 3px rgba（190，255，255，.5），2px 3px 3px rgba（0，0，0，.2），插入0-1px 1px rgba（0，0，0，.5），插入0-1px 1px rgba（255，255，1）；
}
.row0.屏幕
{
宽度：100%；
高度：65px；
利润率：0 11px 11px 0；
边框：5px纯灰；
边界半径：10px；
}
.第1行，
.row2，
.row3，
.第4行，
.第5行，
.第6行
{
宽度：100%；
}
#零
{
宽度：183px；
左侧填充：35px；
文本对齐：左对齐；
}
#相等的
{
线高：229px；
高度：141px；
边际：0-141px；
}
按钮
.row0
{
溢出：隐藏；
}
#先生，
#乘，
#减去，
#加上，
#相等的
{
右边距：0；
}
按钮
{
字体大小：36px；
线高：65px；
浮动：左；
宽度：86px；
高度：65px；
利润率：0 11px 11px 0；
文本对齐：居中；
颜色：黑色；
}

国会议员
M+
M-
先生
C
±
÷
×
7.
8.
9
−
4.
5.
6.
+
1.
2.
3.
=
0
.

您可以用此阴影替换您的

框阴影

：

box-shadow: 1px 1px 10px 3px #BFBFBF, inset 2px 2px 1px rgba(162, 162, 162, 0.4), inset -2px -2px 15px rgba(0, 0, 0, 0.6);

行动中

*
{
/*首先在计算机上查找字体，然后使用TypeKit上托管的版本，然后默认为无衬线*/
字体系列：“Myriad Pro”，“Myriad Pro”，无衬线；
字体大小：32px；
框大小：边框框；
保证金：0；
填充：0；
}
.计算器
{
溢出：隐藏；
宽度：417px；
高度：自动；
保证金：100像素自动；
填充：20px 20px 9px；
边界半径：20px；
背景：线性梯度（#ddd，#b3b3，#9f9f9f）；
/*临时斜边*/
盒影：1px 1px 10px 3px#bfbf，插入2px 2px 1px rgba（1621621620.4），插入-2px-2px 15px rgba（0,0,0.6）；
}
.row0.屏幕
{
宽度：100%；
高度：65px；
利润率：0 11px 11px 0；
边框：5px纯灰；
边界半径：10px；
背景：线性梯度（#eefcd7，#d6e4c1）；
}
.第1行，
.row2，
.row3，
.第4行，
.第5行，
.第6行
{
宽度：100%；
}
#零
{
宽度：183px；
左侧填充：35px；
文本对齐：左对齐；
}
#相等的
{
线高：229px；
高度：141px；
边际：0-141px；
}
按钮
.row0
{
溢出：隐藏；
}
#先生，
#乘，
#减去，
#加上，
#相等的
{
右边距：0；
}
按钮
{
字体大小：36px；
线高：65px；
浮动：左；
宽度：86px；
高度：65px；
利润率：0 11px 11px 0；
文本对齐：居中；
颜色：黑色；
边界半径：20px；
背景：线性梯度（#e9e9e9，#dadada，#c8c8）；
盒影：1px 1px 2px 1px rgba（0,0,0,3），-1px-1px 2px 1px rgba（0,0,0,3），-1px 1px 2px 1px rgba（0,0,0,3），1px-1px 2px 1px rgba（0,0,3）；
文本阴影：0 2px白色；
}
/*移除默认的蓝色焦点框*/
按钮：焦点，
对焦按钮
{
大纲：无！重要；
}

国会议员
M+
M-
先生
C
±
÷
×
7.
8.
9
−
4.
5.
6.
+
1.
2.
3.
=
0
.

您可以将长方体阴影相乘并叠加

*{
/*首先在计算机上查找字体，然后使用TypeKit上托管的版本，然后默认为无衬线*/
字体系列：“Myriad Pro”，“Myriad Pro”，无衬线；
字体大小：32px；
框大小：边框框；
保证金：0；
填充：0；
}
.计算器{
溢出：隐藏；
宽度：417px；
高度：自动；
利润率：100像素2米；
填充：20px 20px 9px；
边界半径：20px；
背景：线性梯度（#ddd，#b3b3，#9f9f9f）；
/*临时斜边*/
盒影：0 0 3px 4px白色，0 0 3px 3px，0-1px 3px rgba（190，255，255，.5），2px 3px 3px rgba（0，0，0，.2），插入0-1px 1px rgba（0，0，0，.5），插入0 1px 1px rgba（255，255，1）；
}
.row0.屏幕{
高度：65px；
保证金：5px 5px 11px；
边界半径：10px；
背景：线性梯度（#eefcd7，#d6e4c1）；
盒影：插入0 0 2px 1px，插入0 0 5px白色，
0 1px灰色，
-2px-2px 2px 1px灰色，
2px-2px 2px 1px灰色，
0 2px 2px灰色，
0 4px 2px 1px白色
}
.第1行，
.row2，
.row3，
.第4行，
.第5行，
.第6行{
宽度：100%；
}
#零{
宽度：183px；
左侧填充：35px；
文本对齐：左对齐；
}
#相等的{
线高：229px；
高度：141px；
边际：0-141px；
}
按钮
.row0{
溢出：隐藏；
}
#先生，
#乘，
#减去，
#加上，
#相等的{
右边距：0；
}
钮扣{
字体大小：36px；
线高：65px；
浮动：左；
宽度：86px；
高度：65px；
利润率：0 11px 11px 0；
文本对齐：居中；
颜色：黑色；
边界半径：20px；
背景：线性梯度（#e9e9e9，#dadada，#c8c8）；
盒影：1px 1px 2px 1px rgba（0,0,0,3），-1px-1px 2px 1px rgba（0,0,0,3），-1px 1px 2px 1px rgba（0,0,0,3），1px-1px 2px 1px rgba（0,0,3）；
文本阴影：0 2px白色；
}
/*移除默认的蓝色焦点框*/
按钮：焦点，
对焦按钮{
大纲：无！重要；
}
身体{
显示器：flex；
}

国会议员
M+
M-
先生
C
±
÷
×
7.
8.
9
−
4.
5.
6.