09边框的基本使用方法
08：
border: 10px solid red; 三者之间没有逗号
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .box{ 8 /*分辨率 1920*1080 在同一面积下 小格子越多图像越清晰*/ 9 /*设置宽度 单位 px（像素）*/ 10 width:200px; 11 height: 100px; 12 /*表示给盒子设置边框的宽度*/ 13 /*border-width:4px ;*/ 14 /*表示设置边框的风格 solid表示实线 dotted 表示点线 dashed表示虚线*/ 15 /*border-style:solid ;*/ 16 /*设置边框的颜色*/ 17 /*border-color: red;*/ 18 /*以上三条代码可以简写成一条*/ 19 /*border:4px solid blue;*/ 20 /*单独设置某一条边 */ 21 /*设置下边*/ 22 /*border-bottom: 4px dashed blue;*/ 23 /*设置上边*/ 24 /*border-top: 4px solid rgb(255,0,0);*/ 25 /*设置左边*/ 26 /*border-left: 4px solid red;*/ 27 /*设置右边*/ 28 /*border-right: 4px solid blue;*/ 29 30 /*边框圆角*/ 31 border: 4px solid red; 32 /*border-radius: 20px; 设置四个角*/ 33 /*border-radius: 10px(上左 下右) 20px(上右 下左);*/ 34 /*border-radius: 10px(上左) 20px(上右 下左) 30px(下右);*/ 35 /*border-radius: 10px(上左) 20px(上右) 30px(下右) 40px(下左);顺时针*/ 36 /*设置圆 必须是一个正方形width、height*/ 37 /*border-radius: 50%;*/ 38 /*设置椭圆：是一个长方形*/ 39 border-radius: 50%; 40 41 } 42 </style> 43 </head> 44 <body> 45 <div class="box"></div> 46 </body> 47 </html>
