html中盒子边框（html–盒子的边框属性（border））

时间2025-05-04 08:40:10分类IT科技浏览8551

导读：content:内容框（我们设置的宽高是内容框的宽高）...

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>