1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <meta name="keywords", content=""> 7 <meta name="description", content=""> 8 <style type="text/css"> 9 *{margin:0; padding:0;} 10 .box{ 11 width:200px; 12 height:200px; 13 background:red; 14 border:5px solid green; /* 15 也可以顺时针赋值像素:border-top(right,bottom,left) 16 边框有几种形式: 17 none : 无边框（默认值） 18 solid：实线 19 dashed：虚线 20 dotted：点状线 21 double：双实线 22 groove ：3D凹槽 23 ridge：3D立槽 24 inset：3D嵌入边框1 25 outset：3D嵌入边框2 26 */ 27 } 28 .box1{ /*设置三角形*/ 29 width:0px; 30 height:0px; 31 border:5px solid transparent; /*设置边框为透明(transparent)*/ 32 border-bottom: 10px solid green; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="box"></div> 38 <div class="box1"></div> 39 </body> 40 </html>
浙公网安备 33010602011771号