漸變虛線邊框

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

以下是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;

}

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

那有沒有效果更精致的虛線邊框漸變實(shí)現(xiàn)方法呢？當(dāng)然有！我們可以借助CSS3 mask遮罩來實(shí)現(xiàn)。

借助CSS遮罩實(shí)現(xiàn)精致的漸變虛框，漸進(jìn)增強(qiáng)，不支持遮罩的瀏覽器還是純色虛框，這個(gè)方法HTML只需要一層標(biāo)簽即可，而且沒有冗余的純色覆蓋，適用于各種背景場(chǎng)合，代碼如下：

.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;}????}

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

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

CSS?mask遮罩包含屬性和知識(shí)點(diǎn)非常多，也非常強(qiáng)大，這里就不展開詳說了，有興趣的朋友可以多搜索學(xué)習(xí)一下相關(guān)知識(shí)。

虛線邊框滾動(dòng)動(dòng)畫

內(nèi)容占位

.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;}

}

實(shí)線邊框loading動(dòng)畫

實(shí)線的效果是一條邊框?qū)嵕€，像個(gè)貪吃蛇一樣，一直圍著這個(gè)圖片元素跑啊跑，跑啊跑，就像跑馬燈那樣一直不停歇。

實(shí)現(xiàn)原理其實(shí)也頗為簡單，就是使用CSS?clip屬性對(duì)邊框進(jìn)行剪裁而已，使用clip屬性是因?yàn)榧嫒菪院?#xff0c;如果你的項(xiàng)目不需兼容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);?}

}

實(shí)際上，要想loading效果好，應(yīng)該兩個(gè)線框相互驅(qū)逐，像下面這樣：

???

.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);?}

}

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。