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;
相关推荐
往日情怀酿做酒 V17639296384 分钟前
web架构2------(nginx多站点配置,include配置文件,日志,basic认证,ssl认证)
前端·nginx·架构
独立开阀者_FwtCoder6 分钟前
Axios 请求传 ArrayBuffer 参数
前端·javascript·后端
@菜菜_达6 分钟前
CSS radial-gradient函数详解
前端·css
小鱼人爱编程25 分钟前
进入外包,我犯了所有程序员都会犯的错!
android·前端·程序员
明月看潮生27 分钟前
青少年编程与数学 02-020 C#程序设计基础 17课题、WEB与移动开发
开发语言·前端·青少年编程·c#·编程与数学
江城开朗的豌豆1 小时前
JavaScript篇:柯里化函数:像‘吃薯片’一样拆分参数,你会上瘾! 🍟
前端·javascript·面试
你才是向阳花2 小时前
前端限流如何实现,如何防止服务器过载
运维·服务器·前端
站在风口的猪11083 小时前
《前端面试题:BFC(块级格式化上下文)》
前端·css·css3
钢铁男儿5 小时前
C# 类和继承(使用基类的引用)
java·javascript·c#
czliutz5 小时前
NiceGUI 是一个基于 Python 的现代 Web 应用框架
开发语言·前端·python