关于border-width的奇妙探索

最新推荐文章于 2024-08-27 01:20:40 发布

weixin_30520015

最新推荐文章于 2024-08-27 01:20:40 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/rosestudy/p/4836927.html

版权

刚好刷前端面试题里有一道关于气泡对话框的，然后就思考怎么做捏~~ 然后就觉得应该有创建蒙版之类的特技！不会 == 于是看看张鑫旭的博客，看到了边框法实现底部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>