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;
相关推荐
不一样的少年_10 分钟前
【前端效率工具】再也不用 APIfox 联调!零侵入 Mock,全程不改代码、不开代理
前端·javascript·浏览器
IT_陈寒10 分钟前
JavaScript 性能优化实战:我通过这7个技巧将页面加载速度提升了65%
前端·人工智能·后端
JIngJaneIL13 分钟前
数码商城系统|电子|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·数码商城系统
GISer_Jing20 分钟前
Flutter架构解析:从引擎层到应用层
前端·flutter·架构
GISer_Jing28 分钟前
Flutter开发全攻略:从入门到精通
android·前端·flutter
艾小码31 分钟前
Vue组件通信不再难!这8种方式让你彻底搞懂父子兄弟传值
前端·javascript·vue.js
lcc18732 分钟前
Vue 数据代理
前端·javascript·vue.js
Moment33 分钟前
为什么我们从 Python 迁移到 Node.js
前端·后端·node.js
excel38 分钟前
📘 全面解析:JavaScript 时间格式化 API 实战指南
前端
咖啡の猫2 小时前
Vue基本路由
前端·vue.js·状态模式