我目前正在尝试重新创建 OS X Mavericks 中的计算器。目前，我只是在研究它的结构和样式。
我已经完成了大部分；然而，当我试图在外部重新创建边缘效果以及按钮和输出屏幕周围的效果时遇到了麻烦。
如有任何帮助/指导，我们将不胜感激。
我有自己的边缘版本作为占位符。
*
{
font-size: 32px;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.calculator
{
overflow: hidden;
width: 417px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
/* Temporary Beveled Edge */
box-shadow: 0 -1px 3px rgba(190, 255, 255, .5), 2px 3px 3px rgba(0, 0, 0, .2), inset 0 -1px 1px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, 1);
}
.row0 .screen
{
width: 100%;
height: 65px;
margin: 0 11px 11px 0;
border: 5px solid gray;
border-radius: 10px;
}
.row1,
.row2,
.row3,
.row4,
.row5,
.row6
{
width: 100%;
}
#zero
{
width: 183px;
padding-left: 35px;
text-align: left;
}
#equal
{
line-height: 229px;
height: 141px;
margin: 0 0 -141px;
}
button,
.row0
{
overflow: hidden;
}
#MR,
#multiply,
#minus,
#plus,
#equal
{
margin-right: 0;
}
button
{
font-size: 36px;
line-height: 65px;
float: left;
width: 86px;
height: 65px;
margin: 0 11px 11px 0;
text-align: center;
color: black;
}<!DOCTYPE html>
<body>
<div class="calculator">
<div class="row0">
<div class="screen"></div>
</div>
<div class="row1">
<button type="button" id="MC">MC</button>
<button type="button" id="M+">M+</button>
<button type="button" id="M-">M-</button>
<button type="button" id="MR">MR</button>
</div>
<div class="row2">
<button type="button" id="C">C</button>
<button type="button" id="plusminus">±</button>
<button type="button" id="divide">÷</button>
<button type="button" id="multiply">×</button>
</div>
<div class="row3">
<button type="button" id="7">7</button>
<button type="button" id="8">8</button>
<button type="button" id="9">9</button>
<button type="button" id="minus">−</button>
</div>
<div class="row4">
<button type="button" id="4">4</button>
<button type="button" id="5">5</button>
<button type="button" id="6">6</button>
<button type="button" id="plus">+</button>
</div>
<div class="row5">
<button type="button" id="1">1</button>
<button type="button" id="2">2</button>
<button type="button" id="3">3</button>
<button type="button" id="equal">=</button>
</div>
<div class="row6">
<button type="button" id="zero">0</button>
<button type="button" id="dot">.</button>
</div>
</div>
</body>最佳答案
您可以乘以盒子阴影并堆叠它们。
* {
/* Looks for font on computer first, then uses the version hosted on TypeKit, then defaults to sans-serif */
font-family: 'Myriad Pro', 'myriad-pro', sans-serif;
font-size: 32px;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.calculator {
overflow: hidden;
width: 417px;
height: auto;
margin: 100px 2em;
padding: 20px 20px 9px;
border-radius: 20px;
background: linear-gradient(#ddd, #b3b3b3, #9f9f9f);
/* Temporary Beveled Edge */
box-shadow:0 0 3px 4px white, 0 0 3px 3px, 0 -1px 3px rgba(190, 255, 255, .5), 2px 3px 3px rgba(0, 0, 0, .2), inset 0 -1px 1px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, 1);
}
.row0 .screen {
height: 65px;
margin: 5px 5px 11px ;
border-radius: 10px;
background: linear-gradient(#eefcd7, #d6e4c1);
box-shadow:inset 0 0 2px 1px,inset 0 0 5px white,
0 0 1px gray,
-2px -2px 2px 1px gray,
2px -2px 2px 1px gray,
0 2px 2px gray,
0 4px 2px 1px white
}
.row1,
.row2,
.row3,
.row4,
.row5,
.row6 {
width: 100%;
}
#zero {
width: 183px;
padding-left: 35px;
text-align: left;
}
#equal {
line-height: 229px;
height: 141px;
margin: 0 0 -141px;
}
button,
.row0 {
overflow: hidden;
}
#MR,
#multiply,
#minus,
#plus,
#equal {
margin-right: 0;
}
button {
font-size: 36px;
line-height: 65px;
float: left;
width: 86px;
height: 65px;
margin: 0 11px 11px 0;
text-align: center;
color: black;
border-radius: 20px;
background: linear-gradient(#e9e9e9, #dadada, #c8c8c8);
box-shadow: 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, 0, .3);
text-shadow: 0 2px white;
}
/* Removes default blue focus box */
button:focus,
button.focus {
outline: none !important;
}
body {
display:flex;
}<!DOCTYPE html>
<body>
<div class="calculator">
<div class="row0">
<div class="screen"><span id="output"></span></div>
</div>
<div class="row1">
<button type="button" id="MC">MC</button>
<button type="button" id="M+">M+</button>
<button type="button" id="M-">M-</button>
<button type="button" id="MR">MR</button>
</div>
<div class="row2">
<button type="button" id="C">C</button>
<button type="button" id="plusminus">±</button>
<button type="button" id="divide">÷</button>
<button type="button" id="multiply">×</button>
</div>
<div class="row3">
<button type="button" id="7">7</button>
<button type="button" id="8">8</button>
<button type="button" id="9">9</button>
<button type="button" id="minus">−</button>
</div>
<div class="row4">
<button type="button" id="4">4</button>
<button type="button" id="5">5</button>
<button type="button" id="6">6</button>
<button type="button" id="plus">+</button>
</div>
<div class="row5">
<button type="button" id="1">1</button>
<button type="button" id="2">2</button>
<button type="button" id="3">3</button>
<button type="button" id="equal">=</button>
</div>
<div class="row6">
<button type="button" id="zero">0</button>
<button type="button" id="dot">.</button>
</div>
</div>
</body>通过悬停过渡，您甚至可以获得一些有趣的效果:这里是我的一支旧笔的示例 http://codepen.io/gcyrillus/full/Awtvi/如果这能给你一些想法 ;) 将鼠标悬停在按钮上
关于html - 在 CSS 中重新创建边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35248212/