CSS中 实现四角边框效果

效果图

关键代码

复制代码
border-radius:10rpx ;
				background: linear-gradient(#fff, #fff) left top,
				  linear-gradient(#fff, #fff) left top,
				  linear-gradient(#fff, #fff) right top,
				  linear-gradient(#fff, #fff) right top,
				  linear-gradient(#fff, #fff) left bottom,
				  linear-gradient(#fff, #fff) left bottom,
				  linear-gradient(#fff, #fff) right bottom,
				  linear-gradient(#fff, #fff) right bottom;
				  background-repeat: no-repeat;
				  width: 230rpx;
				  height: 230rpx;
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  box-sizing: border-box;
				  border: 1px solid transparent;
				  background-size: 4rpx 22rpx, 22rpx 4rpx,4rpx 22rpx,22rpx 4rpx;
相关推荐
大龄秃头程序员4 小时前
Flutter 长列表 1 万条滑动卡顿治理:Baseline vs Optimized 可跑 Demo
前端
yingyima4 小时前
Git 核心命令速查:掌握底层原理与实战技巧
前端
黄林晴4 小时前
Kuikly 是什么?和KMP有什么关系?
android·前端
HokKeung5 小时前
Git Hooks 和 Husky 怎么选
前端·前端工程化
李明卫杭州5 小时前
Vue 3 响应式三剑客:ref、shallowRef、reactive,你真的用对了吗?
前端
触底反弹5 小时前
🔥 JavaScript this 指向全解析:面试必考的 5 大绑定规则
前端·javascript·面试
Csvn5 小时前
TypeScript 类型守卫的 4 个实战级别:从 `filter(Boolean)` 到自定义类型谓词
前端
骑士雄师5 小时前
langchain:推荐切片策略
服务器·前端·langchain
云浪6 小时前
拆开 WAV,看见声音——JavaScript 二进制数组实战全解析
前端·javascript·ecmascript 6
_瑞6 小时前
深入理解灵动岛
前端·ios·app