Border属性的------你所不知道的
这是最近看了别人做的，自己没没事的时候也做点，感觉非常好，这是我学css以来没有注意到的。border居然有这样的特效，大家还是自己看看吧，一看就能明白。其实代码是非常简单的
这是最近看了别人做的，自己没没事的时候也做点，感觉非常好，这是我学css以来没有注意到的。border居然有这样的特效，大家还是自己看看吧，一看就能明白。其实代码是非常简单的，
就是平时的用的时候没有注意。
一段一段的来吧：
1.css如下：
1 <style type="text/css">
2 ul{ list-style:none}
3 .s1{display:block;border-left:20px red solid;border-top:20px green solid;border-right:20px yellow solid;border-bottom:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
4 .s2{display:block;border-left:10px red solid;border-top:10px green solid;border-right:10px yellow solid;border-bottom:10px orange solid;width:20px;height:20px;overflow:hidden;margin:0 auto;}
5 .s3{display:block;border-left:20px transparent dotted;border-top:20px green solid;border-right:20px transparent dotted;border-bottom:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
6 .s3-1{display:block;border-top:20px transparent dotted;border-left:20px green solid;border-bottom:20px transparent dotted;border-right:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
7 .s4{display:block;border-left:40px transparent dotted;border-top:40px green solid;width:0px;height:0px;overflow:hidden;}
8 .s5{display:block;border-right:40px transparent dotted;border-top:40px red solid;width:0px;height:0px;overflow:hidden;}
9 .s6{display:block;border-left:40px transparent dotted;border-bottom:40px #000 solid;width:0px;height:0px;overflow:hidden;}
10 .s7{display:block;border-bottom:40px blue solid;border-right:40px transparent dotted;width:0px;height:0px;overflow:hidden;}
11
12 .t1{ display:block; border-top:20px solid #F00; border-left:20px dotted transparent; border-right:20px dotted transparent; border-bottom:0; overflow:hidden; width:0; height:0}
13 .t2{ display:block; border-left:20px solid #F00; border-top:20px dotted transparent; border-bottom:20px dotted transparent; border-right:0; overflow:hidden; width:0; height:0}
14 .t3{ display:block; border-right:20px solid #F00; border-top:20px dotted transparent; border-bottom:20px dotted transparent; border-left:0; overflow:hidden; width:0; height:0}
15 .t4{ display:block; border-bottom:20px solid #F00; border-left:20px dotted transparent; border-right:20px dotted transparent; border-top:0; overflow:hidden; width:0; height:0}
16
17 /*应用01*/
18 .zheng ul{ list-style:none}
19 .zheng ul li{ float:left; width:150px; height:20px; line-height:20px; background:#000; color:#FFF; text-align:center; font-size:12px}
20 .zheng ul li a{position:relative;width:100%;display:block;background:#000;text-decoration:none;text-align:center;color:#fff}
21 .zheng ul li a b{position:absolute;top:20px;left:60px; border-top:10px solid #000; border-left:10px dotted transparent; border-right:10px dotted transparent;display:none; width:0; height:0; overflow:hidden;}
22 .zheng ul li a:hover{ background:#F00}
23 .zheng ul li a:hover b{ border-top:10px solid #F00; display:block}
24
25 /*应用02*/
26 .zheng02{list-style:none;width:368px;height:20px;position:relative;}
27 .zheng02 ul{list-style:none;}
28 .zheng02 ul li{ float:left; width:70px}
29 .zheng02 ul li a{ display:block; width:70px; border-left:20px transparent dotted;text-decoration:none; color:#F0F; position:absolute}
30 .zheng02 ul .z1 a{border-bottom:20px #F00 solid;}
31 .zheng02 ul .z2 a{border-bottom:20px #000 solid; left:119px}
32 .zheng02 ul .z3 a{border-bottom:20px #0F0 solid;left:199px;}
33 .zheng02 ul li a span{display:block; position:absolute; top:5px; left:10px; font-size:12px; cursor:pointer;}
34 .zheng02 ul li a:hover{ color:#00F}
35 .zheng02 ul .z1 a:hover{border-bottom:20px #FF0 solid;}
36 .zheng02 ul .z2 a:hover{border-bottom:20px #FF0 solid; left:119px}
37 .zheng02 ul .z3 a:hover{border-bottom:20px #FF0 solid;left:199px;}
38
39 /*应用02*/
40 .zheng03{list-style:none;width:368px;height:20px;position:relative;}
41 .zheng03 ul{list-style:none;}
42 .zheng03 ul li{ float:left; width:70px}
43 .zheng03 ul li a{ display:block; width:70px; border-left:20px transparent dotted;text-decoration:none; color:#F0F; position:absolute}
44 .zheng03 ul .z1 a{border-bottom:20px green solid;}
45 .zheng03 ul .z2 a{border-bottom:20px green solid; left:115px}
46 .zheng03 ul .z3 a{border-bottom:20px green solid;left:190px;}
47 .zheng03 ul li a span{display:block; position:absolute; top:4px; left:8px; font-size:12px; cursor:pointer;}
48 .zheng03 ul li a:hover{ color:#00F}
49 .zheng03 ul .z1 a:hover{border-bottom:20px #F00 solid;}
50 .zheng03 ul .z2 a:hover{border-bottom:20px #F00 solid; left:115px}
51 .zheng03 ul .z3 a:hover{border-bottom:20px #F00 solid;left:190px;}
52 .zheng03 ul li a em{border-left:20px green solid;border-bottom:20px #fff solid; display:black; position:absolute; right:0; width:0; height:0; overflow:hidden}
53 .zheng03 ul li a:hover em{border-left:20px #F00 solid;}
54
55 .zheng04{}
56 .zheng04 ul li{position:relative}
57 .zheng04 ul li a{display:block;width:0;height:0;border-top:10px transparent dotted;border-right:20px #FF00CC solid;border-bottom:10px transparent dotted;}
58 .zheng04 ul li a span{display:block;width:0;height:0;border-top:10px transparent dotted;border-left:20px #FF00CC solid;border-bottom:10px transparent dotted; position:absolute;top:0;left:20px;}
59 </style>
60
2 ul{ list-style:none}
3 .s1{display:block;border-left:20px red solid;border-top:20px green solid;border-right:20px yellow solid;border-bottom:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
4 .s2{display:block;border-left:10px red solid;border-top:10px green solid;border-right:10px yellow solid;border-bottom:10px orange solid;width:20px;height:20px;overflow:hidden;margin:0 auto;}
5 .s3{display:block;border-left:20px transparent dotted;border-top:20px green solid;border-right:20px transparent dotted;border-bottom:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
6 .s3-1{display:block;border-top:20px transparent dotted;border-left:20px green solid;border-bottom:20px transparent dotted;border-right:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
7 .s4{display:block;border-left:40px transparent dotted;border-top:40px green solid;width:0px;height:0px;overflow:hidden;}
8 .s5{display:block;border-right:40px transparent dotted;border-top:40px red solid;width:0px;height:0px;overflow:hidden;}
9 .s6{display:block;border-left:40px transparent dotted;border-bottom:40px #000 solid;width:0px;height:0px;overflow:hidden;}
10 .s7{display:block;border-bottom:40px blue solid;border-right:40px transparent dotted;width:0px;height:0px;overflow:hidden;}
11
12 .t1{ display:block; border-top:20px solid #F00; border-left:20px dotted transparent; border-right:20px dotted transparent; border-bottom:0; overflow:hidden; width:0; height:0}
13 .t2{ display:block; border-left:20px solid #F00; border-top:20px dotted transparent; border-bottom:20px dotted transparent; border-right:0; overflow:hidden; width:0; height:0}
14 .t3{ display:block; border-right:20px solid #F00; border-top:20px dotted transparent; border-bottom:20px dotted transparent; border-left:0; overflow:hidden; width:0; height:0}
15 .t4{ display:block; border-bottom:20px solid #F00; border-left:20px dotted transparent; border-right:20px dotted transparent; border-top:0; overflow:hidden; width:0; height:0}
16
17 /*应用01*/
18 .zheng ul{ list-style:none}
19 .zheng ul li{ float:left; width:150px; height:20px; line-height:20px; background:#000; color:#FFF; text-align:center; font-size:12px}
20 .zheng ul li a{position:relative;width:100%;display:block;background:#000;text-decoration:none;text-align:center;color:#fff}
21 .zheng ul li a b{position:absolute;top:20px;left:60px; border-top:10px solid #000; border-left:10px dotted transparent; border-right:10px dotted transparent;display:none; width:0; height:0; overflow:hidden;}
22 .zheng ul li a:hover{ background:#F00}
23 .zheng ul li a:hover b{ border-top:10px solid #F00; display:block}
24
25 /*应用02*/
26 .zheng02{list-style:none;width:368px;height:20px;position:relative;}
27 .zheng02 ul{list-style:none;}
28 .zheng02 ul li{ float:left; width:70px}
29 .zheng02 ul li a{ display:block; width:70px; border-left:20px transparent dotted;text-decoration:none; color:#F0F; position:absolute}
30 .zheng02 ul .z1 a{border-bottom:20px #F00 solid;}
31 .zheng02 ul .z2 a{border-bottom:20px #000 solid; left:119px}
32 .zheng02 ul .z3 a{border-bottom:20px #0F0 solid;left:199px;}
33 .zheng02 ul li a span{display:block; position:absolute; top:5px; left:10px; font-size:12px; cursor:pointer;}
34 .zheng02 ul li a:hover{ color:#00F}
35 .zheng02 ul .z1 a:hover{border-bottom:20px #FF0 solid;}
36 .zheng02 ul .z2 a:hover{border-bottom:20px #FF0 solid; left:119px}
37 .zheng02 ul .z3 a:hover{border-bottom:20px #FF0 solid;left:199px;}
38
39 /*应用02*/
40 .zheng03{list-style:none;width:368px;height:20px;position:relative;}
41 .zheng03 ul{list-style:none;}
42 .zheng03 ul li{ float:left; width:70px}
43 .zheng03 ul li a{ display:block; width:70px; border-left:20px transparent dotted;text-decoration:none; color:#F0F; position:absolute}
44 .zheng03 ul .z1 a{border-bottom:20px green solid;}
45 .zheng03 ul .z2 a{border-bottom:20px green solid; left:115px}
46 .zheng03 ul .z3 a{border-bottom:20px green solid;left:190px;}
47 .zheng03 ul li a span{display:block; position:absolute; top:4px; left:8px; font-size:12px; cursor:pointer;}
48 .zheng03 ul li a:hover{ color:#00F}
49 .zheng03 ul .z1 a:hover{border-bottom:20px #F00 solid;}
50 .zheng03 ul .z2 a:hover{border-bottom:20px #F00 solid; left:115px}
51 .zheng03 ul .z3 a:hover{border-bottom:20px #F00 solid;left:190px;}
52 .zheng03 ul li a em{border-left:20px green solid;border-bottom:20px #fff solid; display:black; position:absolute; right:0; width:0; height:0; overflow:hidden}
53 .zheng03 ul li a:hover em{border-left:20px #F00 solid;}
54
55 .zheng04{}
56 .zheng04 ul li{position:relative}
57 .zheng04 ul li a{display:block;width:0;height:0;border-top:10px transparent dotted;border-right:20px #FF00CC solid;border-bottom:10px transparent dotted;}
58 .zheng04 ul li a span{display:block;width:0;height:0;border-top:10px transparent dotted;border-left:20px #FF00CC solid;border-bottom:10px transparent dotted; position:absolute;top:0;left:20px;}
59 </style>
60
html：如下：：
1 <!--===普通的样式===-->
2 <span class="s1"></span>
3 <span class="s2"></span>
4 <span class="s3"></span>
5 <span class="s3-1"></span>
6 <span class="s4"></span>
7 <span class="s5"></span>
8 <span class="s6"></span>
9 <span class="s7"></span>
10
11 <!--===正3侥幸样式===-->
12 <span class="t1"></span>
13 <span class="t2"></span>
14 <span class="t3"></span>
15 <span class="t4"></span>
16
17 <!--===应用01===-->
18 <div class="zheng">
19 <ul>
20 <li><a href="#" target="_blank">郑恩茹<b style="display:block;"></b></a></li>
21 <li><a href="#" target="_blank">郑恩茹<b></b></a></li>
22 <li><a href="#" target="_blank">郑恩茹<b></b></a></li>
23 </ul>
24 </div>
25 <br /><br /><br /><br />
26 <!--===应用02===-->
27 <div class="zheng02">
28 <ul>
29 <li class="z1"><a href="#" target="_blank"><span>郑恩茹</span></a></li>
30 <li class="z2"><a href="#" target="_blank"><span>郑恩茹</span></a></li>
31 <li class="z3"><a href="#" target="_blank"><span>郑恩茹</span></a></li>
32 </ul>
33 </div>
34 <br /><br />
35 <!--===应用03===-->
36 <div class="zheng03">
37 <ul>
38 <li class="z1"><a href="#" target="_blank"><span>郑恩茹</span><em></em></a></li>
39 <li class="z2"><a href="#" target="_blank"><span>郑恩茹</span><em></em></a></li>
40 <li class="z3"><a href="#" target="_blank"><span>郑恩茹</span></a></li>
41 </ul>
42 </div>
43 <br /><br />
44 <!--===应用04===-->
45 <div class="zheng04">
46 <ul>
47 <li><a href="#" target="_blank"><span></span></a></li>
48 </ul>
49 </div>
50
2 <span class="s1"></span>
3 <span class="s2"></span>
4 <span class="s3"></span>
5 <span class="s3-1"></span>
6 <span class="s4"></span>
7 <span class="s5"></span>
8 <span class="s6"></span>
9 <span class="s7"></span>
10
11 <!--===正3侥幸样式===-->
12 <span class="t1"></span>
13 <span class="t2"></span>
14 <span class="t3"></span>
15 <span class="t4"></span>
16
17 <!--===应用01===-->
18 <div class="zheng">
19 <ul>
20 <li><a href="#" target="_blank">郑恩茹<b style="display:block;"></b></a></li>
21 <li><a href="#" target="_blank">郑恩茹<b></b></a></li>
22 <li><a href="#" target="_blank">郑恩茹<b></b></a></li>
23 </ul>
24 </div>
25 <br /><br /><br /><br />
26 <!--===应用02===-->
27 <div class="zheng02">
28 <ul>
29 <li class="z1"><a href="#" target="_blank"><span>郑恩茹</span></a></li>
30 <li class="z2"><a href="#" target="_blank"><span>郑恩茹</span></a></li>
31 <li class="z3"><a href="#" target="_blank"><span>郑恩茹</span></a></li>
32 </ul>
33 </div>
34 <br /><br />
35 <!--===应用03===-->
36 <div class="zheng03">
37 <ul>
38 <li class="z1"><a href="#" target="_blank"><span>郑恩茹</span><em></em></a></li>
39 <li class="z2"><a href="#" target="_blank"><span>郑恩茹</span><em></em></a></li>
40 <li class="z3"><a href="#" target="_blank"><span>郑恩茹</span></a></li>
41 </ul>
42 </div>
43 <br /><br />
44 <!--===应用04===-->
45 <div class="zheng04">
46 <ul>
47 <li><a href="#" target="_blank"><span></span></a></li>
48 </ul>
49 </div>
50
