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;
相关推荐
kmblack13 小时前
javascript计算年龄
开发语言·javascript·ecmascript
甲维斯3 小时前
测一波Kimi K2.7,消耗一周配额!
前端·人工智能·游戏开发
Dick5073 小时前
ROS2 多机器人通用 Driver 层复盘:BaseRobotDriver 到多平台 Mock 切换实现
前端·javascript·机器人
xiaofeichaichai3 小时前
前端安全 XSS 与 CSRF
前端·安全·xss
JS菌3 小时前
Skills 动态加载系统:让 AI Agent 按需获取领域知识
前端·人工智能·后端
weedsfly3 小时前
Sass 代码复用完全指南:从变量到模块化
前端
张拭心3 小时前
Android 17 新特性:后台音频交互限制加强
android·前端
张拭心4 小时前
Android 17 新特性:ProfilingManager 新触发器
android·前端
黄敬峰4 小时前
从 XMLHttpRequest 到 JSON 模拟:打通前后端通信的任督二脉
javascript