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;
相关推荐
W***D455几秒前
nodejs链接redis
javascript·redis·bootstrap
梦6506 分钟前
VUE树形表格组件如何自定义展开箭头以及箭头位置
javascript·vue.js·elementui
国服第二切图仔9 分钟前
Electron for 鸿蒙PC项目开发之模态框组件
javascript·electron·harmonyos
irises10 分钟前
从零实现2D绘图引擎:6.动画系统的实现
前端·数据可视化
_Jyann_12 分钟前
uniapp两种方式实现自定义tabbar
前端·javascript·uni-app
一 乐15 分钟前
数码商城系统|电子|基于SprinBoot+vue的数码商城系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·springboot
盛夏绽放18 分钟前
新手入门:实现聚焦式主题切换动效(Vue3 + Pinia + View Transitions)
前端·vue3·pinia·聚焦式主题切换
Howie Zphile18 分钟前
NEXTJS/REACT有哪些主流的UI可选
前端·react.js·ui
fruge20 分钟前
React Server Components 实战:下一代 SSR 开发指南
前端·javascript·react.js
hxmmm20 分钟前
preconnect、dns-prefetch、prerender、preload、prefetch
javascript