关于css:分享一个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
像这样来设置地位