html – 在CSS中重新创建Edge

2023年9月28日 215次阅读

我目前正在尝试重新创建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">&#x000B1</button>
      <button type="button" id="divide">&#x000F7</button>
      <button type="button" id="multiply">&#x000D7</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">&#x02212</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">&#x0002B</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">&#x000B1</button>
      <button type="button" id="divide">&#x000F7</button>
      <button type="button" id="multiply">&#x000D7</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">&#x02212</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">&#x0002B</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/的例子,如果它给你一些想法;)悬停按钮

点赞