css实现四角圆边框

最新推荐文章于 2024-01-03 12:10:32 发布

我就不思

最新推荐文章于 2024-01-03 12:10:32 发布

阅读量676

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_45788691/article/details/133376538

版权

CSS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

在这里插入图片描述
摘要：

做大屏的项目时，遇到很多地方要用到不同尺寸的盒子需要圆角的效果，所以不可能要求ui弄那么多图片的，并且那么多图片加载速度很慢的，比较臃肿，大屏要求的就是流畅，所以这用css加载很快的！封装了对应的盒子给到对应的class，给不同高宽来实现 !

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.flexCenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	html,
	body {
		height: 100%;
		.flexCenter(); 
	}

	:root {
		--borderColor: red;
	}

	.content {}

	.logo {
		border-radius: 10px;
		box-shadow: 0 0 1.5vw #2F4F4F inset;
		cursor: pointer;
		text-align: center;
		width: 500px;
		height: 100px;
		line-height: 100px;
		padding: 0px 20px;
		background: linear-gradient(to left, var(--borderColor), var(--borderColor)) left top no-repeat,
					linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left top no-repeat,
					linear-gradient(to left, var(--borderColor), var(--borderColor)) right top no-repeat,
					linear-gradient(to bottom, var(--borderColor), var(--borderColor)) right top no-repeat,
					linear-gradient(to left, var(--borderColor), var(--borderColor)) left bottom no-repeat,
					linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left bottom no-repeat,
					linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat,
					linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat;
		background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
		transition: all .4s ease;
		border: 1px solid transparent;
		color: white;
		font-size: 30pt;
		letter-spacing: 0.1em;
	}

	.logo:hover {
		/* border: 1px solid var(--borderColor) */
	}
</style>

<body>
	<div class="content">
		<div class="logo"></div>
	</div>
</body>

我就不思

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现四角圆边框

封装了对应的盒子给到对应的class，给不同高宽来实现
复制链接

扫一扫

专栏目录

css实现四角圆边框

“相关推荐”对你有帮助么？