CSS中一个很重要的概念是盒模型，CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里
<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="css/test.css"> </head> <body> <div class="box"></div> </body> </html>
.box{ border: 20px solid rgb(255,189,200); padding: 20px; height: 100px; width: 100px; background: rgb(160,197,232); }
效果：
宽度和高度都为180px，即20+20+100+20+20 = 180px，而内容区域一样是100px，加上box-sizing:border-box之后：
<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="css/test.css"> </head> <body> <div class="box"></div> </body> </html>
.box{ border: 100px solid rgb(255,189,200);/* 使用:after伪类的时候可以不添加solid，使用content的内容可保证小三角出现 */ border-top-color: #333; border-left-color: #7fc; border-bottom-color: #f4c; height: 0px; width: 0px; }
.box{ border: 100px solid rgb(255,189,200); border-top-color: #333; border-left-color: #7fc; border-bottom-color: #f4c; padding: 20px; /* 给予padding部分空间 */ height: 20px; /* 给予content部分空间 */ width: 20px; }
效果：
简单应用：
<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="css/test.css"> </head> <body> <div class="box"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </body> </html>
.box{ background: #2b2b2b; border-radius: 5px 5px; padding: .5em 0 .9375em .9375em; position: absolute; width: 222px; } .box:after{ border: solid transparent; border-top-color: #2b2b2b; border-width: 15px; content: " "; height: 0; left: 50%; margin-left: -15px; position: absolute; top: 99.9%; width: 0; } li{ color: white; }
效果：
原文：http://www.cnblogs.com/TwinklingZ/p/5334363.html