自定义边框长宽

最新推荐文章于 2023-11-27 10:22:17 发布

shaonian1996

最新推荐文章于 2023-11-27 10:22:17 发布

阅读量549

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/qq_41179401/article/details/79637805

版权

html/css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>自定义边框长宽</title>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
	<div id="container">
		<div class="border">border top</div>
	</div>
</body>
</html>

给.border设置边框：

css:

*{
    margin: 0;
    padding: 0;
}
#container {
    position: relative;   /*相对定位*/
    color: #666;
    width: 200px;
    height: 200px;
}
.border{
    background: #eee;
    width: 200px;
    height: 200px;
}
.border:before {
    content: '';
    position: absolute;
    left: 200px;    
    top: 50px;     
    height: 100px;         /*边框高度*/
    width: 1px;           /*边框宽度*/
    background-color:#999; /*边框颜色*/
}