border属性
border:1px solid red;
边框的三要素小属性
| 小属性 | 意义 |
|---|---|
| border-width | 线宽 |
| border-style | 线型 |
| border-color | 线颜色 |
四个方向的边框
| 属性 | 意义 |
|---|---|
| border-top | 上边框 |
| border-right | 下边框 |
| border-bottom | 右边框 |
| border-left | 左边框 |
第一要素：线宽度
第二要素：线型
三种常见线型
| 线型值 | 意义 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状线 |
第三要素：线颜色
去掉边框线
案例
<!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.0">
<title>Document</title>
<style>
.box {
width:160px;
height:160px;
border: 1px solid #000;
}
section {
float:left;
width:160px;
height:160px;
border: 3px solid #000;
margin-right:10px;
}
section.spec {
border-bottom-color:blue;
border-right-style:dotted;
border-left:none;
}
</style>
</head>
<body>
<div class="box"></div>
<section></section>
<section></section>
<section class="spec"></section>
<section></section>
<section></section>
</body>
</html>
border-left:none; 属性即可去掉左边框，以此类推
利用边框制作三角形
当边框宽度达到一定值时，会在边框与边框之间形成斜线，当将盒子宽高设置为0时，将边框颜色设置为transparent透明色，并将一侧边框通过小属性层叠大属性的特点，设置为其他颜色从而达到制作出三角形的效果。
注意：不能将其他三个方向的边框去掉，这样第四个边框无法形成斜线，形成的是矩形。
<!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.0">
<title>Document</title>
<style>
.box {
/* 将宽度和高度设置为0； 只留下边框，从而达到以一侧的边框成为三角型 */
width:0px;
height:0px;
/* 再将边框颜色设置为透明色 transparent */
border: 20px solid transparent;
border-top-color:rgb(243, 10, 10);
}
.box1 {
/* 将宽度和高度设置为0； 只留下边框，从而达到以一侧的边框成为三角型 */
width:0px;
height:0px;
/* 再将边框颜色设置为透明色 transparent */
border: 20px solid transparent;
border-bottom-color:rgb(243, 10, 10);
}
.box3 {
/* 将宽度和高度设置为0； 只留下边框，从而达到以一侧的边框成为三角型 */
width:0px;
height:0px;
/* 再将边框颜色设置为透明色 transparent */
border: 20px solid transparent;
border-left-color:rgb(243, 10, 10);
}
.box4 {
/* 将宽度和高度设置为0； 只留下边框，从而达到以一侧的边框成为三角型 */
width:0px;
height:0px;
/* 再将边框颜色设置为透明色 transparent */
border: 20px solid transparent;
border-right-color:rgb(243, 10, 10);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html
