用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);
}複製程式碼

基本效果如下：

以上的基本原理是通過兩層線性漸變背景去覆蓋，第一層是在padding-box容器內（及虛線邊框的容器內的白色部分，如果換成border-box那肯定把虛線也覆蓋了），用這一層去覆蓋repeating-linear-gradient生成的條紋背景。具體的虛線的顏色和間距都可以通過repeating-linear-gradient生成的條紋背景去調整。最後給出 linear-gradient 支援的瀏覽器，要使用的話請權衡。