這周在使用React + Semantic UI做一個(gè)小demo時(shí)，想做一個(gè)這樣的button
button.PNG
這還不簡(jiǎn)單，直接在basic的button上加個(gè)style = {{border:'dashed 1px'}}不就好了融蹂？結(jié)果卻是這樣子的
button-shadow.PNG
button里面總是有一圈灰邊。查了半天才搞清楚廓潜，原來(lái)是Semantic UI中basic button的邊緣阱佛，不是用border來(lái)定義的，而是用了box-shadow耍缴。所以我的寫法砾肺，相當(dāng)于同時(shí)定義了
border和box-shadow，怪不得會(huì)有兩圈了防嗡。
基本語(yǔ)法如下：
- offset-x: x軸偏移的距離变汪，從左到右
- offset-y: y軸偏移的距離，從上到下
- blur-radius: 模糊處理的大小
- spread-radius: 擴(kuò)大區(qū)域的大小
- color: 陰影的顏色
- inset: 內(nèi)部陰影 (Semantic-UI的做法蚁趁，就是用了內(nèi)部陰影
box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset)
同一個(gè)元素可以定義多個(gè)box-shadow裙盾，用逗號(hào)隔開(kāi)
/* 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
