用CSS重新创建边缘

Question

用CSS重新创建边缘

htmlcss

4

我正在尝试重新创建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>

- E. Otero

2个回答

0

您可以使用以下代码替换您的box-shadow：

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);

实战演练

*
{
    /* 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 auto;
    padding: 20px 20px 9px;

    border-radius: 20px;
    background: linear-gradient(#ddd, #b3b3b3, #9f9f9f);
    /* Temporary Beveled Edge */
    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);
}

.row0 .screen
{
    width: 100%;
    height: 65px;
    margin: 0 11px 11px 0;

    border: 5px solid gray;
    border-radius: 10px;
    background: linear-gradient(#eefcd7, #d6e4c1);
}

.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;
}

<!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>

- Peyman Mohamadpour

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-Cyrillus · Accepted Answer

您可以将盒阴影相乘并堆叠。

* {
  /* 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/ ，如果那给你一些想法；悬停在按钮上。