分享一个csstrick实现正方形四个角设置小正方形的方法

时间：2023-03-31 02:09:56 CSS

项目的UI设计中就有这样的风格。一开始使用的背景图简单粗暴，后来其他地方出现了问题。由于有背景图，拉长边框后小方块的宽度变宽了，然后想用纯css实现，百度没找到类似的东东，后来在umi交流群里，有高手给了我cssbackgrund:linear-gradientgradientproperty可以实现，因为可以设置渐变从哪里开始，这样我们就可以实现四个顶点的定位，上面的代码：html{children}

css.fw-titleBar{width:100%;显示：内联块；位置：相对；背景：线性渐变（向左，#00BDFF，#00BDFF）不重复左上，线性渐变（向左，#00BDFF，#00BDFF）不重复右上，线性渐变（向左，#00BDFF，#00BDFF)左下角不重复，线性渐变（向左，#00BDFF,#00BDFF）右下角不重复；背景尺寸：8px8px,8px8px,8px8px,8px8px;填充：8px0；&::之前{内容：'';宽度：计算（100%-30px）；高度：计算（100%-30px）；背景色：#00BDFF4D；位置：绝对;顶部：50%；左：50%；转换：翻译（-50%，-50%）；z-指数：-1；}.fw-titleBar-content{宽度：100%；高度：100%；显示：内联柔性；位置：相对；证明内容：空格之间；对齐项目：居中；border-top:1pxsolid#00BDFF4D;border-bottom:1pxsolid#00BDFF4D;你也可以像这样设置线性渐变（向左，#00BDFF，#00BDFF）不重复左上30px的位置