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;
相关推荐
布列瑟农的星空8 分钟前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
山有木兮木有枝_11 分钟前
node文章生成器
javascript·node.js
yvvvy27 分钟前
前端必懂的 Cache 缓存机制详解
前端
北海几经夏42 分钟前
React自定义Hook
前端·react.js
龙在天1 小时前
从代码到屏幕,浏览器渲染网页做了什么❓
前端
TimelessHaze1 小时前
【performance面试考点】让面试官眼前一亮的performance性能优化
前端·性能优化·trae
yes or ok1 小时前
前端工程师面试题-vue
前端·javascript·vue.js
我要成为前端高手1 小时前
给不支持摇树的三方库(phaser) tree-shake?
前端·javascript
Noxi_lumors1 小时前
VITE BALABALA require balabla not supported
前端·vite
周胜22 小时前
node-sass
前端