CSS border（边框）样式写法总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS border（边框）样式写法总结相关的知识，希望对你有一定的参考价值。
参考技术A border属性 ：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法：border： border-width | border-style | border-color;
border-width ：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。
border-top-width：设置元素上边框宽度
border-right-width：设置元素右边框宽度
border-bottom-width：设置元素下边框宽度
border-left-width：设置元素左边框宽度
border-style ：边框样式。
border-top-style：设置元素上边框样式
border-right-style：设置元素右边框样式
border-bottom-style：设置元素下边框样式
border-left-style：设置元素左边框样式
属性值有：
none：无边框。
hidden：隐藏边框。对于表，hidden 用于解决边框冲突。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双线边框。两条单线与其间隔的和等于指定的border-width值。
groove：3D凹槽边框。
ridge：3D垄状边框。
inset：凹边框。
outset：凸边框。
border-color ：边框颜色。
1.1 边框各样式效果图
1.2 四条边颜色样式相同
1.3 四条边颜色不同，样式相同
1.4 四条边颜色相同，样式不同
1.5 设置上边框宽度、样式、颜色
1.6 设置右边框宽度、样式、颜色
1.7 设置下边框宽度、样式、颜色
1.8 设置左边框宽度、样式、颜色
以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _
CSS 盒模型
构成
每一个 HTML 元素就相当于是一个矩形的 "盒子
这个盒子由这几个部分构成
border —— 边框
content —— 内容
padding —— 内边距
margin —— 外边距
边框
基础属性
粗细: border-width
样式: border-style，默认没边框；solid-实线边框；dashed-虚线边框；dotted-点线边框
颜色: border-color
支持简写：
border: 1px solid red;
border: 1px solid blue;
border-top: red
上述代码只给上边框设为红色, 其余为蓝色 (层叠性，就近原则)
边框会撑大盒子
举例:
<head>
<title>边框</title>
<style>
#d1
width: 300px;
height: 200px;
border: 1px solid blue;
</style>
</head>
<body>
<div id="d1"></div>
</body>
通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子
*
box-sizing: border-box;
刷新页面：
内边距
padding —— 设置内容和边框之间的距离
基础写法
四个方向内边距:
- padding-top
- padding-bottom
- padding-left
- padding-right
举例:
<head>
<title>内边距</title>
<style>
#d1
width: 300px;
height: 200px;
border: 2px solid blue;
padding-top: 10px;
padding-left: 5px;
</style>
</head>
<body>
<div id="d1"></div>
</body>
复合写法
可以把多个方向的 padding 合并到一起
- padding: 5px；表示四个方向都是 5px
- padding: 5px 10px；表示上下内边距 5px，左右内边距为 10px
- padding: 5px 10px 20px；表示上边距 5px，左右内边距为 10px, 下内边距为 20px
- padding: 5px 10px 20px 30px；表示 上5px，右10px，下20px，左30px (顺时针)
举例：
<head>
<title>内边距</title>
<style>
#d1
width: 300px;
height: 200px;
border: 2px solid blue;
padding: 5px 10px 20px 30px;
</style>
</head>
<body>
<div id="d1"></div>
</body>
外边距
margin —— 控制盒子和盒子之间的距离
基础写法
四个方向外边距：
- margin-top
- margin-bottom
- margin-left
- margin-right
举例:
<head>
<title>外边距</title>
<style>
#d1
width: 200px;
height: 100px;
border: 2px solid blue;
margin-bottom: 10px;
#d2
width: 200px;
height: 100px;
border: 2px solid red;
margin-top: 20px;
</style>
</head>
<body>
<div id="d1">牛奶</div>
<div id="d2">鸡蛋</div>
</body>
复合写法
类似于 padding 的复合写法
- margin: 10px： 四个方向都设置
- margin: 10px 20px： 上下为10，左右20
- margin: 10px 20px 30px：上10，左右20，下 30
- margin: 10px 20px 30px 40px： 上10，右20，下 30，左40
举例：
<head>
<title>外边距</title>
<style>
#d3
width: 200px;
height: 100px;
border: 2px solid red;
margin: 5px 10px 20px 30px;
</style>
</head>
<body>
<div id="d3">复合写法</div>
</body>
块级元素水平居中
前提:
- 指定宽度(如果不指定宽度，默认和父元素一致)
- 把水平 margin 设为 auto
举例：
- 未水平居中:
<head>
<title>块级元素水平居中</title>
<style>
div
width: 300px;
height: 200px;
background-color: thistle;
</style>
</head>
<body>
<div></div>
</body>
- 水平居中:
<head>
<title>块级元素水平居中</title>
<style>
div
width: 300px;
height: 200px;
background-color: thistle;
margin: 0 auto;
</style>
</head>
<body>
<div></div>
</body>
注意:
- margin: auto —— 是给块级元素用得到
text-align: center —— 是让 行内元素/ 行内块元素 居中的 - 对于垂直居中，不能使用 "上下 margin 为 auto " 的方式
以上是关于CSS border（边框）样式写法总结的主要内容，如果未能解决你的问题，请参考以下文章