用css實現自定義虛線邊框

開發產品功能的時候ui往往會給出虛線邊框的效果圖，於是乎，我們往往第一時間想到的是用css里的border，可是border里一般就提供兩種效果，dashed或者dotted，ui這時就不滿意了，說虛線太密了。廢話不多說，下面直接給解決方案（參考css揭秘）：

div {
    padding: 1em;
    border: 1px dashed transparent;
    background: linear-gradient(white,white) padding-box,
    repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.25em,white 0,white 0.75em);
}

基本效果如下：