html页面边框的另一种写法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>边框</title>
 6         <style type="text/css">
 7             div{
 8                 width: 300px;
 9                 height: 300px;
10                 /*border: 1px solid red; 复合样式*/
11                 
12                 /*单一样式*/
13                 border-width: 1px 2px 3px 4px;
14                 border-style: solid dashed dotted solid;
15                 border-color: red blue black pink;
16                 /*四个值依次分别对上、右、下、左赋值*/
17                 /*当只有两个值时一次分别对上/下、左/右赋值*/
18                 /*当放三个值时依次分别对上、左/右、下赋值*/
19                 border-top: 10px solid yellow;
20                 /*单独对上边框进行赋值，
21                  border-bottom为下边框
22                  border-left为左边框
23                  border-right为右边框
24                  * */
25                 border-bottom-color: hotpink;
26                 /*单独对下边框颜色进行复制*/
27             }
28         </style>
29     </head>
30     <body>
31         <div>
32             
33             
34         </div>
35         
36         
37     </body>
38 </html>

注意：边框其实不是一个矩形，当你把上边变得颜色设置的不同时你会发现变得是一个梯形，而如果你把div的宽和高设置为0的话，这个有变得不是梯形，他的上低也会变为0，成为一个三角形，这个在面试前端工作时，面试官有可能会问到