分享一個css小技巧，實現給正方形的四個角設置小方塊的方法

項目的UI設計中有這樣的樣式，一開始用的背景圖，簡單粗暴，後來在其餘地方出了問題，由於是背景圖的緣由，這個框框被拉長了後小方塊的寬度也變寬了，而後想用純css實現，百度竟然沒查到相似的東東，後來在umi的交流羣裏有個牛人給我指點了下 css backgrund: linear-gradient漸變屬性能夠實現，由於它能夠設置漸變從哪開始，這就能夠讓咱們實現4個頂點的位置定位咯，上代碼：
html

<div className={`fw-titleBar ${className}`} style={style}>
     <div className="fw-titleBar-content">
         {children}
     </div>
</div>

css

.fw-titleBar {
     width: 100%;
     display: inline-block;
     position: relative;
     background: linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top,
     linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right top,
     linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left bottom,
     linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right bottom;
     background-size:8px 8px,8px 8px,8px 8px,8px 8px;
     padding: 8px 0;
     &::before{
         content: '';
         width: calc(100% - 30px);
         height: calc(100% - 30px);
         background-color: #00BDFF4D;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         z-index: -1;
     }
     .fw-titleBar-content{
         width: 100%;
         height: 100%;
         display: inline-flex;
         position: relative;
         justify-content: space-between;
         align-items: center;
         border-top: 1px solid #00BDFF4D;
         border-bottom: 1px solid #00BDFF4D;
         padding: 10px 25px;
     }
}

固然你也能夠在
linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top 30px
像這樣來設置位置