CSS中实现四角边框效果

最新推荐文章于 2024-08-26 13:58:59 发布

初遇你时动了情

最新推荐文章于 2024-08-26 13:58:59 发布

阅读量738

点赞数 2

分类专栏： css 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/u010843503/article/details/140212178

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述
关键代码

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;