html--盒子的边框属性（border）

最新推荐文章于 2024-06-20 17:28:13 发布

¡Venceremo

最新推荐文章于 2024-06-20 17:28:13 发布

阅读量1.7w

点赞数 16

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125735678

版权

笔记专栏收录该内容

52 篇文章 2 订阅

订阅专栏

content:内容框（我们设置的宽高是内容框的宽高）

padding:内边距 top right bottom left（四边--一般默认指定的方向）

border:边框线包裹了内边距（四边）

margin:外边距在边框的外面元素和其他元素的间隔距离（四边）

border:边框线包裹了内边距（四边）

属性名	属性值	用法
boder-style	solid(实线) dotted（点构成的虚线） dashed（-构成的虚线） double（双实线） none（没有边框线）	border-style:solid double solid double;（方向为从上边开始顺时针）
	border-style:solid double solid ;（上下的边框线为实线右的边框线为双实线下边框线为实线左边框线为双实线按照顺时针最后一个左和右相同）	border-style:solid double ;（上下的边框线为实线左右的边框线为双实线）

四边的表示分别为：

boder-top-style：solid(实线)

boder-right-style：solid(实线)

boder-bottom -style：solid(实线)

boder-left-style：solid(实线)

整体：：boder-style：solid(四个框全部实线)

实际操作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
</head>
	<style>
		div{
			border-style:dashed;
			border-color: red;
		}
		h1{
			border-style:dashed solid;
			
		}
		h2{
			border-style:dashed solid double;
		}
		h3{
			border-style:solid;
		}
	</style>
<body>
	<div>content</div>
	<h1>大家</h1>
	<h2>你好</h2>
	<h3>世界</h3>
</body>
</html>

边框线的宽度

属性名	属性值	用法
border-width	像素或者%或者thin（细）\medium(默认值)中\thick(粗)之一	border-width:2px;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
</head>
	<style>
		div{
			border-style:dashed;
			border-width: inherit;
		}
		h1{
			border-style:dashed solid;
			border-width: thin;
			
		}
		h2{
			border-style:dashed solid double;
			border-width: medium;
		}
		h3{
			border-style:solid;
			border-width: thick;
		}
		h4{
			border-style:double;
			border-width: 20px;	
		}
		h5{
			border-style:dotted;
			border-width: %;
		}
	</style>
<body>
	<div>content</div>
	<h1>大家</h1>
	<h2>你好</h2>
	<h3>世界</h3>
	<h4>大家好</h4>
	<h5>我</h5>
	
</body>
</html>

边框线的颜色

属性名	属性值	用法
border-color	blue\|rgb(25%,35%,45%)\|#909090\|transparent	border-color:red blue;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
</head>
	<style>
		div{
			border-style:dashed;
			border-width: inherit;
			
		}
		h1{
			border-style:dashed solid;
			border-width: thin;
			border-color: blue;
			
		}
		h2{
			border-style:dashed solid double;
			border-width: medium;
			border-color: red;
			
		}
		h3{
			border-style:solid;
			border-width: thick;
			border-color: rgba(107,57,215,1.00);
		}
		h4{
			border-style:double;
			border-width: 20px;	
			border-color: transparent;
		}
		h5{
			border-style:dotted;
			border-width: %;
			border-color: #4E34D0;
		}
	</style>
<body>
	<div>content</div>
	<h1>大家</h1>
	<h2>你好</h2>
	<h3>世界</h3>
	<h4>大家好</h4>
	<h5>我</h5>
	
</body>
</html>

使用border属性一次性定义边框的宽度样式颜色

border:1px solid red;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
</head>
	<style>
		div{
			border-style:dashed;
			border-width: inherit;
			
		}
		h1{
			border-style:dashed solid;
			border-width: thin;
			border-color: blue;
			
		}
		h2{
			border-style:dashed solid double;
			border-width: medium;
			border-color: red;
			
		}
		h3{
			border-style:solid;
			border-width: thick;
			border-color: rgba(107,57,215,1.00);
		}
		h4{
			border-style:double;
			border-width: 20px;	
			border-color: transparent;
		}
		h5{
			border-style:dotted;
			border-width: %;
			border-color: #4E34D0;
		}
		h6{
			border: thick solid red;
		}
	</style>
<body>
	<div>content</div>
	<h1>大家</h1>
	<h2>你好</h2>
	<h3>世界</h3>
	<h4>大家好</h4>
	<h5>我</h5>
	<h6>世界</h6>
	
	
</body>
</html>