边框

border：边框，描述盒子的边框

边框的三要素：粗细线性样式颜色

例如：border：1px solid red；

如果颜色不写，默认是黑色；如果粗细不写，不显示边框；如果只写线性样式，默认有3px的粗细，线性样式，颜色默认是黑色。

border的写法

1.常用写法

border：1px solid green；

线性样式种类：solid（实线）、dotted（点线）、dobule（双实线）、dashed（虚线）

2.三要素写法

border-width：3px；

border-style：solid；

border-color：red；

3.按方向来写

border-top：10px solid green；

border-right：10px solid green；

border-bottom：10px solid green；

border-left：10px solid green；

还可以这样写:border-top-width：10px；

　　　　　　 border-top-style：solid；

　　　　　　 border-top-color：red；

4.不设置样式

border：none；

border：0；

使用border制作小三角

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         .box{
 8             width: 0px;
 9             height: 0px;
10             border-bottom: 100px solid red;
11             border-left: 100px solid transparent;
12             border-right: 100px solid transparent;
13         }
14     </style>
15 
16 </head>
17 <body>
18 
19 <div class="box"></div>
20     
21 </body>
22 </html>

使用border制作圆

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 200px;
10             border: 1px solid red;
11             border-radius: 50%;
12             background-color: green;
13         }
14     </style>
15 
16 </head>
17 <body>
18 
19 <div class="box"></div>
20     
21 </body>
22 </html>