刚好刷前端面试题里有一道关于气泡对话框的，然后就思考怎么做捏~~ 然后就觉得应该有创建蒙版之类的特技！不会 == 于是看看张鑫旭的博客，看到了边框法实现底部90度尖角对话框，第一遍看，觉得代码看起来怪怪的，好吧，先顺着敲一遍看看。然后，极端的改变下属性值或者注释看看~~啊噢，原来是border-width在施魔法呢~于是，我就开始玩了......咦，好像发现了点什么呢~~~想起来了，border-width的四条边框是可以单独设置的，然后，终于见识了transparent的神奇~
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>测试border-width</title> 6 <style type="text/css"> 7 div{ 8 /*这里给一个空的div设置border后，将显示一个高度为20px的矩形框*/ 9 width: 500px; 10 border:10px solid red; 11 margin-bottom: 30px; 12 } 13 .third{ 14 border-color:red transparent; 15 } 16 .change{ 17 /*现在有点像沙漏了吧，再慢慢的改变width的值，仔细一测量，这里的width就是两个凹进去的点的水平距离，而定边和底边的宽度等于width+2*border-width*/ 18 width:2px; 19 } 20 .four{ 21 border-color:red transparent transparent transparent; 22 } 23 .five{ 24 width: 0; 25 /*改变这里的height值看看，挺有意思的 */ 26 height: 20px; 27 } 28 .six{ 29 width: 200px; 30 height: 0px; 31 } 32 .seven{ 33 border-width:10px; 34 border-color:red red transparent transparent; 35 } 36 .eight{ 37 border-width:10px; 38 border-color:transparent red transparent transparent; 39 } 40 .nine{ 41 border-width:10px; 42 border-color:transparent transparent red transparent; 43 } 44 .ten{ 45 border-width:10px; 46 border-color:transparent transparent transparent red; 47 } 48 .eleven{ 49 border-width:10px; 50 border-color:transparent transparent red red; 51 } 52 </style> 53 </head> 54 <body> 55 <!-- 当div没有高，只设置span时，div效果就是一个矩形啦，高度就是border-width的两倍，真的，不骗你，不信你自己看第一个效果 --> 56 <div></div> 57 <div>当div里有文字的时候，也就是div有自己的高度时，border会是什么效果呢?这个时候我们可以看成，div的上下分别被一个高度为10px的矩形包围，左右分别被一个宽度为10px的矩形包围。</div> 58 <!-- 当我的border-color:red transparent时，我就成了这样一个怪样纸 --> 59 <div class="third"></div> 60 <div class="third change"></div> 61 <div class="third">我和上面的哥们都设置了border-color:red transparent;但是我有文字，也就是我有自己的高度，</div> 62 <!-- 当div没有高度且border-color:red transparent transparent;你自己看，这到底是怎么回事呢？我的border-bottom好像失踪啦--> 63 <div class="four"></div> 64 <div class="four">我和上面的哥们都设置了border-color:red transparent transparent;虽然我现在有高度了，但是我的border-bottom好哥们还是没回家</div> 65 <div class="four five"></div>上面显示了一个底边为20px，高度为10px的倒直角三角形。这里的底边宽度和高度都是由border-width决定的，和我的height根本没关系呢 66 <div class="four six"></div>下面显示了一个顶边为20px，底边为40px，高为10px的倒立梯形 67 <div class="seven"></div> 68 <div class="eight"></div> 69 <div class="nine"></div> 70 <div class="ten"></div> 71 <div class="eleven"></div> 72 </body> 73 </html>
运行效果：
