html中正⽅形去掉4个⾓，关于css：分享⼀个css⼩技巧实现给正⽅形的四个⾓设置⼩⽅块。。。
我的项⽬的UI设计中有这样的款式，⼀开始⽤的背景图，简略粗犷，起初在其余中央出了问题，因为是背景图的起因，这个框框被拉长了后⼩⽅块的宽度也变宽了，⽽后想⽤纯css实现，百度竟然没查到相似的东东，起初在umi的交换⾥有个⽜⼈给我指导了下 css backgrund: linear-gradient突变属性能够实现，因为它能够设置突变从哪开始，这就能够让咱们实现4个顶点的地位定位咯，上代码：
html
{children}
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;
css去掉滚动条
padding: 10px 25px;
}
}
当然你也能够在
linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top 30px 像这样来设置地位

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。