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，成为一个三角形，这个在面试前端工作时，面试官有可能会问到