css边框border(含代码,易懂)
css中边框有很多的属性方法，让我为大家介绍一下吧！
1.边框样式(border-style)
| 常用属性 | 简单介绍 |
|---|---|
| none | 没有边框,即忽略所有边框的宽度(默认值) |
| solid | 设置边框为实线 |
| dashed | 设置边框为虚线 |
| dotted | 设置边框为点线 |
| double | 设置边框为双实线 |
如下代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框样式</title><style>div {width: 100px;height: 100px;}.none {border-style: none; /* 无边框 */}.solid {border-style: solid; /* 实线 */}.dashed {border-style: dashed;/* 虚线 */}.dotted {border-style: dotted;/* 点线 */}.double {border-style: double;/* 双实线 */}</style>
</head>
<body><div class="none"></div><div class="solid"></div><div class="dashed"></div><div class="dotted"></div><div class="double"></div>
</body>
</html>
在我们设置边框样式的时候我们可以指定某一条边进行修饰,也可以为四条边进行修饰
| 属性名 | 对应的边框方位 |
|---|---|
| border-top-style | 上边框样式(属性值为上面表格内的常用属性) |
| border-right-style | 右边框样式(属性值为上面表格内的常用属性) |
| border-bottom-style | 下边框样式(属性值为上面表格内的常用属性) |
| border-left-style | 左边框样式(属性值为上面表格内的常用属性) |
如下代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>带方向的边框样式</title><style>div {width: 100px;height: 100px;}.top {border-left-style: none; /* 无上边框 */}.right {border-right-style: solid; /* 右边框为实线 */}.bottom {border-bottom-style: dashed;/* 下边框为虚线 */}.left {border-left-style: dotted;/* 左边框为点线 */}</style>
</head>
<body><div class="top"></div><div class="right"></div><div class="bottom"></div><div class="left"></div>
</body>
</html>
border-style也是可以同时设置四个方向的边框
| 属性名 | 属性值对应的边框方位 |
|---|---|
| border-style | 4个值时对应的边框样式(上 右 下 左) |
| border-style | 3个值时对应的边框样式(上 左右 下) |
| border-style | 2个值时对应的边框样式(上下 左右) |
| border-style | 1个值时对应的边框样式(上下左右) |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>四个值及以下</title><style>div {width: 100px;height: 100px;}.one {border-style: solid; /* 上右下左(边框)都为实线 */}/*(样式属性一个值时)*/.two {border-style: solid dashed; /* 上下(实线),左右(虚线)*/}/*(样式属性二个值时)*/.three {border-style:solid dashed dotted;/* 上(实线),左右(虚线),下(点线) */}/*(样式属性三个值时)*/.four {border-style:solid dashed double dotted;/* 上(实线),右(虚线),下(双实线),左(点线) */}/*(样式属性四个值时)*/</style>
</head>
<body><div class="one"></div><!-- 一个值时 --><div class="two"></div><!-- 二个值时 --><div class="three"></div><!-- 三个值时 --><div class="four"></div><!-- 四个值时 -->
</body>
</html>
2.边框宽度(border-width)
特别注意要设置边框样式
在我们边框里是可以设置某一条边框的宽度的，特别注意添加边框宽度前要给边框上边框样式
| 属性名 | 需要设置边框宽度的方位 |
|---|---|
| border-top-width | 上边框宽度,宽度为数值类型(记住要跟px) |
| border-right-width | 右边框宽度,宽度为数值类型(记住要跟px) |
| border-bottom-width | 下边框宽度,宽度为数值类型(记住要跟px) |
| border-left-width | 左边框宽度,宽度为数值类型(记住要跟px) |
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>带方向的边框样式</title><style>/* 特别注意,需要设置给边框宽度前一定要给边框设置边框样式 */div {width: 100px;height: 100px;border-style:solid;}/* 记住要值为数值型,要加上px(像素) */.top {border-left-width: 1px; /* 上边框宽度1px */}.right {border-right-width: 1px; /* 右边框宽度1px */}.bottom {border-bottom-width: 1px;/* 下边框宽度1px */}.left {border-left-width: 1px;/* 左边框宽度1px */}</style>
</head>
<body><div class="top"></div><div class="right"></div><div class="bottom"></div><div class="left"></div>
</body>
</html>
border-width也是可以同时设置四个方向边框的宽度
| 属性名 | 属性值对应的边框宽度方位 |
|---|---|
| border-width | 4个值时对应的边框宽度(上 右 下 左) |
| border-width | 3个值时对应的边框宽度(上 左右 下) |
| border-width | 2个值时对应的边框宽度(上下 左右) |
| border-width | 1个值时对应的边框宽度(上下左右) |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>四个方向边框宽度</title><style>/* 特别注意添加边框宽度之前需要添加边框样式 *//* 记住要值为数值型,要加上px(像素) */div {width: 100px;height: 100px;border-style:solid;}.one {border-width: 1px; /* 上右下左(宽度1px) */}/*(一个值时)*/.two {border-width: 1px 2px; /* 上下(1px),左右(2px)*/}/*(二个值时)*/.three {border-width:1px 2px 3px;/* 上(1px),左右(2px),下(3px) */}/*(三个值时)*/.four {border-width:1px 2px 3px 4px;/* 上(实线),右(虚线),下(双实线),左(点线) */}/*(四个值时)*/</style>
</head>
<body><div class="one"></div><!-- 一个值时 --><div class="two"></div><!-- 二个值时 --><div class="three"></div><!-- 三个值时 --><div class="four"></div><!-- 四个值时 -->
</body>
</html>
3.边框颜色(border-color)
border-color可以取英文颜色,rgb(r,g,b),rgba(r,g,b,a)可以设置透明,十六进制的方法#AABBCC 来设置边框的颜色
特别注意要设置边框样式
设置边框颜色各个方向:
| 属性名 | 对应的边框颜色 |
|---|---|
| border-top-color | 上边框颜色 |
| border-right-color | 右边框颜色 |
| border-bottom-color | 下边框颜色 |
| border-left-color | 左边框颜色 |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框颜色</title><style>/* 特别注意要添加边框样式 */div {width: 100px;height: 100px;border-style: solid;}.top {border-left-color: pink; /* 左边框为粉色 */}.right {border-right-color: rgb(0, 0, 0); /* 右边框为黑色 */}.bottom {border-bottom-color: #fff;/* 下边框为白色 */}.left {border-left-color: rgba(0, 0, 0, 0.1);/* 左边框为透明的黑色 */}</style>
</head>
<body><div class="top"></div><div class="right"></div><div class="bottom"></div><div class="left"></div>
</body>
</html>
border-color也是可以同时设置四个方向边框的颜色
| 属性名 | 属性值对应的边框颜色方位 |
|---|---|
| border-color | 4个值时对应的边框颜色(上 右 下 左) |
| border-color | 3个值时对应的边框颜色(上 左右 下) |
| border-color | 2个值时对应的边框颜色(上下 左右) |
| border-color | 1个值时对应的边框颜色(上下左右) |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框颜色设置多个值时</title><style>/* 特别注意要设置边框样式 */div {width: 100px;height: 100px;border-style: solid;}.one {border-color: rgb(0, 0, 0); /* 上右下左(黑色) */}/*(属性值一个时)*/.two {border-color: #fff #000; /* 上下(白色),左右(黑色)*/}/*(属性值二个时)*/.three {border-color:pink orange red;/* 上(粉色),左右(橙色),下(红色) */}/*(属性值三个时)*/.four {border-color:rgba(0, 0, 0, 0.1) pink orange red;/* 上(透明的黑色),右(粉色),下(橙色),左(红色) */}/*(属性值四个时)*/</style>
</head>
<body><div class="one"></div><!-- 一个值时 --><div class="two"></div><!-- 二个值时 --><div class="three"></div><!-- 三个值时 --><div class="four"></div><!-- 四个值时 -->
</body>
</html>
4.边框复合属性(border)
我们也可以指定某一条边进行修饰，也是有复合属性
| 属性名 | 属性值 |
|---|---|
| border-top | 边框宽度 边框样式 边框颜色 |
| border-right | 边框宽度 边框样式 边框颜色 |
| border-bottom | 边框宽度 边框样式 边框颜色 |
| border-left | 边框宽度 边框样式 边框颜色 |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框复合属性</title><style>div {width: 100px;height: 100px;}.top {border-left: 1px solid #fff; /* 上边框宽度1px,白色的实线 */}.right {border-right:2px dashed #000; /* 右边框宽度2px,黑色的虚线 */}.bottom {border-bottom: 3px dotted #fff;/* 下边框宽度3px,白色的点线 */}.left {border-left:4px double #000;/* 左边框宽度4px,黑色的双实线 */}</style>
</head>
<body><div class="top"></div><div class="right"></div><div class="bottom"></div><div class="left"></div>
</body>
</html>
在我们边框里有一种非常常用的写法直接border
复合属性的基本格式 border:边框宽度 边框样式 边框颜色；(这是最常用的方法)
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框复合属性</title><style>.box {width: 100px;height: 100px;border: 1px solid #000;/* 一个边框宽度为1px,实线边框,边框也是为黑色的元素 */}</style>
</head>
<body><div class="box">我是复合属性</div>
</body>
</html>
本文章进入尾声，感谢各位大佬的阅读，如果有什么不对的地方，还请大家指出一下，十分感谢！