用JavaScript做了一个计算器，大部分时间都花在完善样式和交互上了，现在还想着再给它添加一个主题。我发现，我喜欢把一个东西从丑变美的过程，好看比好用更吸引我。这不是一个好习惯……
Demo：https://greyli.github.io/calculator/
源码：https://github.com/greyli/calculator
优化交互、美化样式
在这个计算器里，用到了一些处理技巧，可以让它看起来更真实和漂亮。
计算器边缘阴影
这里使用box-shadow的inset方法，也就是把阴影内嵌到元素里，让计算器看起来是有厚度的：
|
1 |
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，同时按钮向下移动
|
1 2 3 4 5 6 7 8 |
button { box-shadow: 1px 2px #666; } button:active { box-shadow: none; transform: translateY(4px); } |
按钮上的字不可选择
双击按钮或是拖动按钮选择会出现蓝色背景色，设置user-select去掉这个特性
|
1 2 3 4 5 6 |
.un-selectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } |
去掉按钮被选中后的蓝色边线
|
1 |
button:focus {outline:0;} /* 设为none效果相同，或加上 !important */ |