分享一个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
像这样来设置位置