位置: IT常识 - 正文
html--盒子的边框属性（border）(html盒子边框圆角)
编辑：rootadminhtml--盒子的边框属性（border） 
本文链接地址:https://www.jiuchutong.com/zhishi/295284.html
转载请保留说明！
推荐整理分享html--盒子的边框属性（border）(html盒子边框圆角)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html盒子模型外边距,html盒子边框框代码怎么写,html盒子边框框代码怎么写,html中盒子边框,html盒子的边框属性,html中盒子边框,html5盒子边框,html盒子的边框属性,内容如对您有帮助，希望把文章链接给更多的朋友！
content:内容框（我们设置的宽高是内容框的宽高）
padding:内边距 top right bottom left（四边--一般默认指定的方向）
border:边框线包裹了内边距（四边）
margin:外边距 在边框的外面 元素和其他元素的间隔距离（四边）
border:边框线包裹了内边距（四边）属性名属性值用法boder-stylesolid(实线) 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-colorblue|rgb(25%,35%,45%)|#909090|transparentborder-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>
上一篇：vue3项目使用样式穿透修改elementUI默认样式(vue3.0用法)
