这周在使用React + Semantic UI做一个小demo时，想做一个这样的button
button.PNG
这还不简单，直接在basic的button上加个style = {{border:'dashed 1px'}}不就好了？结果却是这样子的
button-shadow.PNG
button里面总是有一圈灰边。查了半天才搞清楚，原来是Semantic UI中basic button的边缘，不是用border来定义的，而是用了box-shadow。所以我的写法，相当于同时定义了
border和box-shadow，怪不得会有两圈了。
基本语法如下：
- offset-x: x轴偏移的距离，从左到右
- offset-y: y轴偏移的距离，从上到下
- blur-radius: 模糊处理的大小
- spread-radius: 扩大区域的大小
- color: 阴影的颜色
- inset: 内部阴影 (Semantic-UI的做法，就是用了内部阴影
box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset)
同一个元素可以定义多个box-shadow，用逗号隔开
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
