漸變虛線邊框

如果對邊框的樣式細節不是很在意，我們可以借助反向鏤空的方法實現，也就是虛線原本實色的地方和周圍顏色融為一體，看上去透明，而原來虛框透明的部分透出漸變背景色，于是看上去像是漸變色。

以下是HTML和CSS：

.box?{

width:?150px;

border:?2px?dashed?#fff;

background:?linear-gradient(to?bottom,?#34538b,?#cd0000);

background-origin:?border-box;

}

.content?{

height:?100px;

background-color:?#fff;

}

問題：雖然這種方式兼容性不錯，IE10+都支持，但是，虛實比例由于反過來了，因此，虛線太稀疏，而且邊角無法形成直角。在實際項目中肯定過不了設計師這一關。

那有沒有效果更精致的虛線邊框漸變實現方法呢？當然有！我們可以借助CSS3 mask遮罩來實現。

借助CSS遮罩實現精致的漸變虛框，漸進增強，不支持遮罩的瀏覽器還是純色虛框，這個方法HTML只需要一層標簽即可，而且沒有冗余的純色覆蓋，適用于各種背景場合，代碼如下：

.box?{

width:?200px;????height:?150px;????border:?2px?dashed?#cd0000;????box-sizing:?border-box;}@supports?(-webkit-mask:?none)?or?(mask:?none)?{.box?{

border:?none;????background:?linear-gradient(to?bottom,?#34538b,?#cd0000)?no-repeat;????-webkit-mask-image:?linear-gradient(to?right,?#000?6px,?transparent?6px),?linear-gradient(to?bottom,?#000?6px,?transparent?6px),??linear-gradient(to?right,?#000?6px,?transparent?6px),?linear-gradient(to?bottom,?#000?6px,?transparent?6px);????-webkit-mask-repeat:?repeat-x,?repeat-y,?repeat-x,?repeat-y;????-webkit-mask-position:?0?0,?0?0,?0?100%,?100%?0;????-webkit-mask-size:?8px?2px,?2px?8px,?8px?2px,?2px?8px;????/*?合并寫法?*/

mask:?linear-gradient(to?right,?#000?6px,?transparent?6px)?repeat-x,

linear-gradient(to?bottom,?#000?6px,?transparent?6px)?repeat-y,

linear-gradient(to?right,?#000?6px,?transparent?6px)?repeat-x?0?100%,

linear-gradient(to?bottom,?#000?6px,?transparent?6px)?repeat-y?100%?0;????mask-size:?8px?2px,?2px?8px,?8px?2px,?2px?8px;}????}

由于這個虛框本質上是CSS繪制的，因此，我們可以隨意控制虛線的虛實比例，非常靈活。

默認情況下，CSS遮罩可以讓元素只顯示遮罩圖片有顏色部分的區域，那么在這里，我們只要使用mask屬性繪制一個黑色虛框，就能實現真正意義上的漸變虛框效果了。

CSS?mask遮罩包含屬性和知識點非常多，也非常強大，這里就不展開詳說了，有興趣的朋友可以多搜索學習一下相關知識。

虛線邊框滾動動畫

內容占位

.box?{

width:?200px;

background:?repeating-linear-gradient(135deg,?transparent,?transparent?3px,?#000?3px,?#000?8px);

animation:?shine?1s?infinite?linear;

overflow:?hidden;

}

.content?{

height:?128px;

margin:?1px;?padding:?10px;

background-color:?#fff;

}

@keyframes?shine?{

0%?{?background-position:?-1px?-1px;}

100%?{?background-position:?-12px?-12px;}

}

實線邊框loading動畫

實線的效果是一條邊框實線，像個貪吃蛇一樣，一直圍著這個圖片元素跑啊跑，跑啊跑，就像跑馬燈那樣一直不停歇。

實現原理其實也頗為簡單，就是使用CSS?clip屬性對邊框進行剪裁而已，使用clip屬性是因為兼容性好，如果你的項目不需兼容IE，則可以使用clip-path屬性來剪裁。

???

.box?{

display:?inline-block;

padding:?10px;

position:?relative;

}

.box::before?{

content:?'';

position:?absolute;

left:?0;?top:?0;?right:?0;?bottom:?0;

border:?2px?solid?#cd0000;

animation:?borderAround?1.5s?infinite?linear;

}

@keyframes?borderAround?{

0%,?100%?{?clip:?rect(0?148px?2px?0);?}

25%?{?clip:?rect(0?148px?116px?146px);?}

50%?{?clip:?rect(114px?148px?116px?0);?}

75%?{?clip:?rect(0?2px?116px?0);?}

}

實際上，要想loading效果好，應該兩個線框相互驅逐，像下面這樣：

???

.box?{

display:?inline-block;

padding:?10px;

position:?relative;

}

.box::before?{

content:?'';

position:?absolute;

left:?0;?top:?0;?right:?0;?bottom:?0;

border:?2px?solid?#cd0000;

animation:?borderAround?1.5s?infinite?linear;

}

.box::after?{

content:?'';

position:?absolute;

left:?0;

top:?0;

right:?0;

bottom:?0;

border:?2px?solid?#cd0000;

animation:?borderAround2?1.5s?infinite?linear;

}

@keyframes?borderAround?{

0%,?100%?{?clip:?rect(0?148px?2px?0);?}

25%?{?clip:?rect(0?148px?116px?146px);?}

50%?{?clip:?rect(114px?148px?116px?0);?}

75%?{?clip:?rect(0?2px?116px?0);?}

}

@keyframes?borderAround2?{

50%?{?clip:?rect(0?148px?2px?0);?}

75%?{?clip:?rect(0?148px?116px?146px);?}

0%,100%?{?clip:?rect(114px?148px?116px?0);?}

25%?{?clip:?rect(0?2px?116px?0);?}

}

此效果應用場景應該說還是相當廣泛的：一是可以用作強調和警示，例如某些非常重要的圖文信息，就可以用這個邊框動畫，保證吸睛人人都會注意到；二是作為loading效果，尺寸可大可小，平常一個大容器里面加載東西，我們都是容器中間放個菊花，實際上，讓容器邊緣這個兩條折線追逐效果也挺好的，或者把容器中的菊花換成同尺寸的邊框動畫也是可以的，既是創意，也是創新。

總結

以上是生活随笔為你收集整理的html div 虚线边框样式,纯CSS实现渐变虚线框和边框滚动动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。