border-color 有一个很重要也很使用的特性,就是border-color 默认颜色是 color 的颜色。具体来讲,就是当没有指定border-color颜色值的时候,会使用当前元素的color计算值作为边框色。

<a href="" class="add" title="继续上传">
      添加图片
    </a>
    <style>
         .add{
           display: inline-block;
          width: 76px; height: 76px;
          color: #ccc;
          border: 2px dashed;
          text-indent: -12em;
          transition: color .25px;
          position: relative;
          overflow: hidden;
         }
         .add:hover{
           color:#34538b;
         }
![](https://heihei12305.github.io/post-images/1566618052864.PNG)
         .add::before, .add::after{
           content: '';
           position: absolute;
           top:50%;
           left: 50%;
         }

         .add::before{
           width:20px;
           border-top: 4px solid;
           margin: -2px 0 0 -10px;
         }

         .add::after{
           height: 20px;
           border-left: 4px solid;
           margin: -10px 0 0 -2px;
         }
      </style>

效果图:

:before :after是真滴好用。

菜鸡要加油丫,还有一年。