用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);
}

基本效果以下：