css给盒子写四个角

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

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;

}

相关推荐
JiangJiang几秒前
🚀 React 弹窗还能这样写?手撸一个高质量 Modal 玩起来!
前端·javascript·react.js
吃炸鸡的前端15 分钟前
el-transfer穿梭框数据量过大的解决方案
前端·javascript
高德开放平台28 分钟前
文末有奖|高德MCP 2.0 出行领域首发打通大模型与高德地图APP互联
前端
苳烨35 分钟前
UniApp使用最新版Android Studio本地离线打包全流程
前端
Monly2137 分钟前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js
李剑一40 分钟前
别再用HTTP/1这个老古董了,两招帮你升级HTTP/2
前端·架构
t2007181 小时前
4.27 react第一天
前端·react.js·前端框架
飞天牛牛1 小时前
前端小知识:彻底搞懂 CSS 的 `position: sticky`!
前端
vim怎么退出1 小时前
46.二叉树展开为链表
前端·leetcode
薛定谔的猫21 小时前
Composition API的深入理解与最佳实践
前端·vue.js