css给盒子写四个角

如图:之前一直用定位  现在发现可以用css写 

css给盒子写四个角_第1张图片

 

 background: linear-gradient(to top, #306eef, #306eef) left top no-repeat,

    /*上左*/ linear-gradient(to right, #306eef, #386eef) left top no-repeat,

    /*左上*/ linear-gradient(to left, #386eef, #306eef) right top no-repeat,

    /*上右*/ linear-gradient(to bottom, #306eef, #306eef) right top no-repeat,

    /*上右*/ linear-gradient(to left, #386eef, #386eef) left bottom no-repeat,

    /* */ linear-gradient(to bottom, #386eef, #306eef) left bottom no-repeat,

    /*左下*/ linear-gradient(to top, #396eef, #396eef) right bottom no-repeat,

    /* 石*/ linear-gradient(to left, #306eef, #306eef) right bottom no-repeat; /*右下*/

  background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;

 顺便记录一下给单数盒子变色

.table-body:nth-child(odd) {

    background: rgba(97, 156, 249, 0.5);

  }

 

最后再记录一下给某个盒子隐藏下滑条

.tableBody::-webkit-scrollbar {

  width: 0;

}

 

你可能感兴趣的:(css,前端)