css虛線邊框漸變和邊框滾動
阿新 • • 發佈:2018-12-21
前言
這幾天又有點鬆懈,分析主要原因是對自己目前的把握不是很準確,對很多方面都一知 半解。所以決定搞好基礎,目前零零散散學習了css,js,vue,webpack,sass,決定分類對每部分都寫部落格深入研究一下。為了激發學習興趣,同時開始學習React。
虛線邊框漸變
本次的內容是虛線邊框的顏色漸變,主要是借鑑了張鑫旭大神的部落格。記錄一下自己不會的點。
方法
大神主要提出了2種解決方法,下面貼出HTML和CSS
- 把邊框實線的部分設為透明,虛線露出漸變色。
.box{ width: 150px; border: 2px dashed #ffffff; background: linear-gradient(to bottom, #34538b, #cd0000); background-origin: border-box; } .content{ background-color: #ffffff; height: 100px; }
效果如圖: 可以看到,此處是有一點瑕疵,那就是邊角無法形成直角。這個技術點主要是設定border 和content 的背景色一致,然後通過設定box的漸變形成漸變色。
- 藉助CSS遮罩實現精緻的漸變虛框
.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; } }
效果如下圖: 此技術主要是CSS的 mask屬性。mask的linear-gradient設定4個方向的虛線,position設定起始位置,repeat設定方向,size設定大小。
虛線邊框滾動動畫
在這裡插入圖片描述主要原理是一個animation動畫,程式碼如下:
.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;} }
效果如圖:
最後
由於這一次是第一次寫部落格,一些常識性的格式可能不規範,相信後面會越來越好。如果有什麼問題可以私信或評論我。
引用自: