設定邊框最常使用border，比如這樣：

border: 1px dashed #333;

這是最常規的方法了，今天再來說說其他兩種方法，

outline方式background方式outline方法

這也算是一種比較常規的方法了，

outline: 1px solid;

但需要注意的是，outline是在容器的最外部，與border的渲染還是有點區別的，同時對比下：

border: 1px dashed #333;outline: 1px solid;

外部實線是outline，內部虛線是border，為了一致，可以設定outline-offset往內縮一點：

outline-offset: -1px;

background方法

這是本文的重點，我也是剛get到此項技能，之前一直不知道background居然如此強大，直接上程式碼：

background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;

這裡我們只設置了上面看，而且還是虛線的，做一說明這種方式的強大，再把其他邊框補上去：

background: 		linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,    linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,    #ffffff;

可見，使用background非常的靈活，邊框的位置可以任意調整。

現在我們已經掌握這幾方式，但本文的重點是上面這種，我們現在來動手操練下：

漸變邊框

background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px    ,    linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,    linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,    linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,    #eee;

滾動虛線邊框

.box {  background:     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,     linear-gradient(0deg, #333 50%, transparent 0) repeat-y,     linear-gradient(0deg, #333 50%, transparent 0) repeat-y;     background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;     background-position: 0 0, 0 100%, 0 0, 100% 0;}.box:hover {  animation: linearGradientMove .3s infinite linear;}@keyframes linearGradientMove {    100% {        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;    }}

滾動漸變

.box {  background:     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y,     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y;     background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;     background-position: 0 0, 0 100%, 0 0, 100% 0;}.box:hover {  animation: linearGradientMove 1s infinite linear;}@keyframes linearGradientMove {    100% {        background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;    }}

以上就是設定邊框的幾個小技巧。

參考：https://www.cnblogs.com/coco1s/p/14291567.html