用css写一个四角框

半盏茶. ོ

于 2020-12-11 15:51:15 发布

阅读量352

点赞数 1

分类专栏： web前端+css 文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/weixin_49296016/article/details/111036948

版权

web前端+css 专栏收录该内容

5 篇文章

订阅专栏

一、先上效果图

二、一个盒子div

<div class="siFrame"></div>

三、css代码

.siFrame {
	width: 200px; 
	height: 100px; 
	margin: auto;
	background: linear-gradient(to left, #4980D9, #4980D9) left top no-repeat, 
	linear-gradient(to bottom, #4980D9, #4980D9) left top no-repeat, 
	linear-gradient(to left, #4980D9, #4980D9) right top no-repeat,
	linear-gradient(to bottom, #4980D9, #4980D9) right top no-repeat, 
	linear-gradient(to left, #4980D9, #4980D9) left bottom no-repeat,
	linear-gradient(to bottom, #4980D9, #4980D9) left bottom no-repeat,
	linear-gradient(to left, #4980D9, #4980D9) right bottom no-repeat,
	linear-gradient(to left, #4980D9, #4980D9) right bottom no-repeat;
	background-size: 2px 15px, 15px 2px, 2px 15px, 15px 2px; 
	}

四、调颜色就是（）里面、长度和粗度background-size里面的四个属性，选择自己需要的调