1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 div{ 100px;height: 100px;margin-top:50px; display: inline-table;}
8 div:nth-child(1){border:5px solid red;}
9 div:nth-child(2){border:5px ridge red;}
10 div:nth-child(3){border:5px outset red;}
11 div:nth-child(4){border:5px inset red;}
12 div:nth-child(5){border:5px groove red;}
13 div:nth-child(6){border:5px double red;}
14 div:nth-child(7){border:5px dotted red;}
15 div:nth-child(8){border:5px dashed red;}
16 </style>
17 </head>
18 <body>
19
20 <div>solid(单实线边框）</div>
21 <div>ridge(有着凸出来效果的边框）</div>
22 <div>outset(使内容有凸出来效果的边框）</div>
23 <div>inset(使内容有凹陷效果的边框）</div>
24 <div>groove(有着凹陷效果的边框)</div>
25 <div>double（双实线边框）</div>
26 <div>dotted(虚线边框）</div>
27 <div>dashed(粗线边框）</div>
28 </body>
29 </html>