边框
border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色
border: solid
border特性
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
通常使用简写方式
border :solid 5px red;
线性样式 粗细 颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> .box{ width: 200px; height: 200px; border:solid 5px red; } </style> </head> <body> <div class="box"></div> </body> </html>
如果颜色不写，默认是黑色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> .box{ width: 200px; height: 200px; border:solid 5px; } </style> </head> <body> <div class="box"></div> </body> </html>
如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> .box{ width: 200px; height: 200px; border:solid ; } </style> </head> <body> <div class="box"></div> </body> </html>
border写法还可以分开写
按照3要素来写border
3个要素 粗细 线性样式 颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> .box{ width: 200px; height: 200px; /*border: 5px solid red;*/ /* 按照3要素*/ border-width: 5px; border-style: solid; border-color: red; } </style> </head> <body> <div class="box"></div> </body> </html>
等于 border: 5px solid red
border- 3px;
border-style: solid;
border-color: red;
后面可以继续写，方向和padding一样 上右下左
border- 5px 10px; /* 上下 左右*/ border-style: solid dotted double dashed; /* 上右下左 */ border-color: red green yellow; /* 上 左右 下 */
按照方向划分
四个方向
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> .box{ width: 200px; height: 200px; /* 按照方向划分*/ border-top-width: 10px; border-top-style: solid; border-top-color: red; border-right-width: 10px; border-right-style: solid; border-right-color: red; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: red; border-left-width: 10px; border-left-style: solid; border-left-color: red; } </style> </head> <body> <div class="box"></div> </body> </html>
上面12条语句，相当于 bordr: 10px solid red;
另外还可以这样写法 效果一样：
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
清除border边框的默认样式，比如input输入框
border:none;
border:0;
设置一个方向没有
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> .box{ width: 200px; height: 200px; border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10px solid red; /* 设置border没有样式*/ border-left: none; } </style> </head> <body> <div class="box"></div> </body> </html>
border-left: 0; 也可以
border-left: 0;
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |