前端笔记11——CSS边框的其他用法（设置单独一条边）

最新推荐文章于 2024-06-24 11:02:57 发布

原创最新推荐文章于 2024-06-24 11:02:57 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #边框 #其他用法 #设置单独一条边

前端专栏收录该内容

93 篇文章

订阅专栏

本文介绍了一种在CSS中独立设置元素四边边框的技巧，通过具体代码实例展示了如何分别为上、下、左、右四条边框指定不同的颜色和宽度，为网页设计提供更多灵活性。

边框的其他用法

我们可以单独设置其中一条边，下面是代码实例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				/*设置宽度和高度 单位px（像素）*/
				width: 100px;
				height: 100px;
				/*单独设置某一条边*/
				/*设置下面*/
				border-bottom: 4px solid blue;
				/*设置上面*/
				border-top: 4px solid red;
				/*设置左边*/
				border-left: 4px solid black;
				/*设置右边*/
				border-right: 4px solid green;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>