一、边框
1.1、边框三要素(width、style、color)
认识
border属性三要素：如border：1px solid red;，线宽度、线型、颜色。
常用线型：solid(实线)、dashed(虚线)、dotted(点状线)
拆分为三个小属性：小属性可以用来层叠大属性，一般情况都是直接写在一起。
三种线性demo
<style> * { padding: 0px; margin: 0px; } div.box1 { width: 200px; height: 200px; border: 1px solid #000; margin-bottom: 10px; } div.box2 { width: 200px; height: 200px; border: 1px dashed #000; margin-bottom: 10px; } div.box3 { width: 200px; height: 200px; border: 1px dotted #000; } </style> <body> <div class="box1">solid</div> <div class="box2">dashed</div> <div class="box3">dotted</div> </body>
1.2、四个方向的边框
可以单独四个方向的属性，与此同时每个方向的边框都可以设置三要素小属性：
1.3、去除边框
语法(去除底部边框)：border-bottom: none
案例：
<style> * { padding: 0px; margin: 0px; } div { height: 200px; width: 200px; border: 3px solid black; margin: 20px auto; } /* 去除掉底部边框 */ div.box1 { border-bottom: none; } </style> <body> <div class="box1"></div> </body>
1.4、小案例：利用边框制作三角形
如何使用边框来制作三角形呢？
首先我们创建一个盒子，将其边框宽度设置大一些，并且上边框设置为红色：
<style> * { padding: 0px; margin: 0px; } div { height: 200px; width: 200px; border: 50px solid black; margin: 20px auto; } /* 设置上边框为红色 */ div.box1 { border-top-color: red; } </style> <body> <div class="box1"></div> </body>
看到之后效果，我们来设想一下若是将方框中的长宽高设置为0，此时的红色效果如何？
是不是发现，三角形已经出来了，其原理就是将盒子的宽高设置为，border的大小设置大一些，接着只留下某一个边距并设置颜色，即可制作出三角形。
实现源码
<style> * { padding: 0px; margin: 0px; } div { height: 0; width: 0; /* 设置颜色为透明 */ border: 50px solid transparent; margin: 20px auto; } /* 设置上边框为红色 */ div.box1 { border-top-color: red; } </style> <body> <div class="box1"></div> </body>
说明：想要设置左、右、上、下的直接更改border-top-color为border-left-color、right、bottom即可。
