CSS中的box-shadow属性

这周在使用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