用JavaScript做了一个计算器，大部分时间都花在完善样式和交互上了，现在还想着再给它添加一个主题。我发现，我喜欢把一个东西从丑变美的过程，好看比好用更吸引我。这不是一个好习惯……
Demo：https://greyli.github.io/calculator/
源码：https://github.com/greyli/calculator

 

优化交互、美化样式

在这个计算器里，用到了一些处理技巧，可以让它看起来更真实和漂亮。

计算器边缘阴影

这里使用box-shadow的inset方法，也就是把阴影内嵌到元素里，让计算器看起来是有厚度的：

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset -1px -6px 12px 0.1px #89847e;

参考内容：https://css-tricks.com/snippets/css/css-box-shadow/

按钮按下效果

其实是设置按钮的box-shadow，按下时把box-shadow设为none，同时按钮向下移动

button {
  box-shadow: 1px 2px #666;
}

button:active {
  box-shadow: none;
  transform: translateY(4px);
}

按钮上的字不可选择

双击按钮或是拖动按钮选择会出现蓝色背景色，设置user-select去掉这个特性

.un-selectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

去掉按钮被选中后的蓝色边线

button:focus {outline:0;}  /* 设为none效果相同，或加上 !important */