前言

這幾天又有點鬆懈，分析主要原因是對自己目前的把握不是很準確，對很多方面都一知 半解。所以決定搞好基礎，目前零零散散學習了css，js，vue，webpack，sass，決定分類對每部分都寫部落格深入研究一下。為了激發學習興趣，同時開始學習React。

虛線邊框漸變

本次的內容是虛線邊框的顏色漸變，主要是借鑑了張鑫旭大神的部落格。記錄一下自己不會的點。

方法

大神主要提出了2種解決方法,下面貼出HTML和CSS

1. 把邊框實線的部分設為透明，虛線露出漸變色。

  .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的漸變形成漸變色。

2. 藉助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;}
}

 

效果如圖：

最後

由於這一次是第一次寫部落格，一些常識性的格式可能不規範，相信後面會越來越好。如果有什麼問題可以私信或評論我。

引用自：