css3 border边框斜线,CSS3教程:边框属性border的极致应用
*{margin:0;padding:0;font-size:12px;}
body{background:#555;}
#wrapper{width:500px;margin:0 auto;border-left:4px #888 solid;border-right:4px #888 solid;background:#fff;padding-bottom:50px;}
#corner{position:relative;}
#corner em,#corner b,#corner strong,#corner i,#corner span{display:block;border-top:67px green solid;border-right:67px transparent dotted;width:0;height:0;overflow:hidden;}
#corner b{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;}
#corner em{border-width:63px;border-top-color:orange;position:absolute;top:0;left:0;}
#corner i{border-width:37px;border-top-color:orange;position:absolute;top:0;left:0;}
#corner strong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;}
#corner span{border-width:33px;border-top-color:#fff;position:absolute;top:0;left:0;}
#corner a{position:absolute;display:block;width:10px;height:10px;font-size:12px;color:#fff;font-weight:bold; text-decoration:none;}
#corner a#b1{left:34px;top:3px;}
#corner a#b2{left:18px;top:18px;}
#corner a#b3{left:3px;top:33px;}
h1 {width:310px;height:100px;line-height:100px;color:#2f231a;font-size:16px;margin:0px auto;position:relative;}
h1 b {color:#b2c63a;font-size:16px;font-style:normal;left:-1px;position:absolute;top:-1px;}
h1 strong{position:absolute;top:25px;left:100px;height:22px;}
/*盒子*/
.tab{width:400px;margin:0 auto;border:1px orange solid;margin-top:10px;text-align:center;}
h2{border-bottom:1px orange solid;line-height:30px;padding-left:10px;background:#FFC966;color:#7C66FF;text-align:center;}
.blog{background:#2f231a;}
.blog a:link,.blog a:visited{color:#fff;}
h3{text-align:center;line-height:26px;height:26px;}
.photobox{border-left:10px red ridge;border-top:10px green ridge;border-right:10px yellow ridge;border-bottom:10px orange ridge;}
.tab_pannel{width:380px;overflow:hidden;margin:20px auto;}
.tab_content{border:1px orange solid;height:100px;width:368px;margin:0 auto;text-align:left;}
/*基本形状----------------------------------------------------------------------------*/
.base{border:1px orange solid;padding-top:10px;width:370px;margin:0 auto;overflow:hidden;}
.base b{width:0;height:0;overflow:hidden;margin-right:20px;display:block;}
/*下三角形*/
.t1{border-left:20px #fff solid;border-top:20px green solid;border-right:20px #fff solid;border-bottom:0;}
/*左三角形*/
.t2{border-top:20px #fff solid;border-right:20px red solid;border-bottom:20px #fff solid;border-left:0;overflow:hidden;}
/*右三角形*/
.t3{border-top:20px #fff solid;border-left:20px #000 solid;border-bottom:20px #fff solid;border-right:0;}
/*上三角形*/
.t4{border-left:20px #fff solid;border-bottom:20px blue solid;border-right:20px #fff solid;border-top:0;}
/*基本形状*/
.tb_base{margin:0 auto;}
.tb_base .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;}
.tb_base .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;}
.tb_base .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;}
.tb_base .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;}
.tb_base .s4{display:block;border-left:40px transparent dotted;border-top:40px green solid;width:0px;height:0px;overflow:hidden;}
.tb_base .s5{display:block;border-right:40px transparent dotted;border-top:40px red solid;width:0px;height:0px;overflow:hidden;}
.tb_base .s6{display:block;border-left:40px transparent dotted;border-bottom:40px #000 solid;width:0px;height:0px;overflow:hidden;}
.tb_base .s7{display:block;border-bottom:40px blue solid;border-right:40px transparent dotted;width:0px;height:0px;overflow:hidden;}
/*综合运用0*/
#menu1{list-style:none;width:380px;margin:0px auto;padding-left:5px;height:20px;}
#menu1 li{float:left;width:85px;height:20px;line-height:20px;margin-right:10px;}
#menu1 li a{position:relative;width:100%;display:block;background:green;text-decoration:none;text-align:center;color:#fff}
#menu1 li a b{position:absolute;top:20px;left:40px;border-left:5px #fff solid;border-top:5px green solid;border-right:5px #fff solid;border-bottom:0;display:none;width:0;height:0;overflow:hidden;}
#menu1 li a:hover{background:orange;}
#menu1 li a:hover b{border-top:5px orange solid;display:block;}
/*综合运用1-菱形菜单*/
p{padding:20px;}
#other li a b{top:10px;right:20px;background:#fff;}
#menu2{list-style:none;width:368px;height:20px;position:relative;left:6px;*left:0px;}
#menu2 li{width:70px;float:left;}
#menu2 li a{display:block;width:70px;border-left:20px transparent dotted;border-top:0;text-decoration:none;color:#fff;position:absolute;}
#menu2 #m1 a{border-bottom:20px green groove;left:39px;}
#menu2 #m2 a{border-bottom:20px red groove;left:119px;}
#menu2 #m3 a{border-bottom:20px blue groove;left:199px;}
#menu2 #m4 a{border-bottom:20px orange groove;left:279px;}
#menu2 li a span{display:block;position:absolute;top:5px;left:8px;}
#menu2 li a:hover{color:#00FFFF;}/**/
#menu2 #m1 a:hover{border-bottom:20px #CC9933 groove;}
#menu2 #m2 a:hover{border-bottom:20px gray groove;}
#menu2 #m3 a:hover{border-bottom:20px #FF00FF groove;}
#menu2 #m4 a:hover{border-bottom:20px #99CC66 groove;}
/*综合运用2-菱形菜单*/
#menu3{list-style:none;width:368px;height:20px;position:relative;left:6px;*left:0;}
#menu3 li{width:90px;height::20px;line-height:20px;float:left;overflow:hidden;position:relative;}
#menu3 li a{display:block;width:70px;height:0px;text-decoration:none;border-left:20px transparent dotted;border-bottom:20px green solid;border-top:0;position:relative;}
#menu3 li a span{display:block;position:absolute;top:2px;left:0px;color:#fff;}
#menu3 li a em{display:block;position:absolute;top:0px;left:50px;border-left:20px green solid;border-bottom:20px #fff solid;width:0;height:0;overflow:hidden;background:#fff;cursor:pointer;}
#menu3 li a:hover{ border-bottom-color:orange;}
#menu3 li a:hover span{background:orange;cursor:pointer;color:#0000CC;}
#menu3 li a:hover em{border-left:20px orange solid;}
#menu3 #m5{left:54px;}
#menu3 #m6{left:39px;}
#menu3 #m7{left:24px;}
#menu3 #m8{left:9px;}
/*滑动条*/
.box{width:200px;line-height:30px;margin:30px auto; position:relative;border:1px orange solid;}
.sliderbg{display:block;border-bottom:5px #F30 solid;width:200px;height:2px;line-height:2px;position:absolute;top:8px;left:0px;}
#sliderbar{width:10px;height:20px;margin-left:20px;}
#sliderbar a{display:block;border-left:5px transparent dotted;border-right:5px transparent dotted;border-bottom:5px orange solid;width:0;height:0;position:relative;}
#sliderbar a b{position:absolute;top:5px;left:-5px;display:block;width:10px;height:15px;background:orange;overflow:hidden;}
#sliderbar a:hover{border-bottom:5px #00F solid;}
#sliderbar a:hover b{background:#00F; cursor:pointer;}
/*右边的上下三角形*/
.title{border-bottom:1px orange solid;line-height:26px;padding-left:10px;position:relative;overflow:hidden;background:#FFDB99;height:26px;}
.title b{display:block;width:280px;line-height:26px;height:26px;padding-left:10px;float:left;}
.title span a{display:block;width:0px;height:0px;float:left;overflow:hidden;position:absolute;border-left:5px transparent dotted;border-right:5px transparent dotted;}
.title .up a{border-bottom:5px #666 solid;top:7px;right:10px;}
.title .up a:hover{border-bottom:5px blue solid;}
.title .down a{border-top:5px #666 solid;top:14px;right:10px;}
.title .down a:hover{border-top:5px blue solid;}
/*综合运用3---------------------------幸运转轮1*/
#menu4box{width:182px;height:160px;margin:20px auto;background:#fff;/*背景颜色值*/}
#menu4{list-style:none;width:182px;height:20px;position:relative;margin:20px auto;}
#menu4 li{position:absolute;}
#menu4 li a{display:block;width:0;height:24px;border-top:10px transparent dotted;border-right:20px #FF00CC solid;border-bottom:10px transparent dotted;}
#menu4 li a em{display:block;width:0;height:24px;border-top:10px transparent dotted;border-left:20px #FF00CC solid;border-bottom:10px transparent dotted;position:absolute;top:0;left:20px;cursor:pointer;}
#menu4 li a b{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}
#menu4 li a{text-decoration:none;}
#menu4 li a:hover{border-right-color:#CC3300;}
#menu4 li a:hover em{border-left-color:#CC3300;cursor:pointer;}
#menu4 li a:hover b{color:#000000;cursor:pointer;}
#m9{left:50px;}
#m10{left:95px;}
#m11{left:27px;top:38px;}
#m12{left:72px;top:38px;}
#m13{left:117px;top:38px;}
#m14{left:50px;top:76px;}
#m15{left:95px;top:76px;}
/*综合运用4--------------------------幸运转轮2*/
#menu5box{position:relative;width:182px;height:200px;margin:20px auto;background:#fff;/*背景颜色值*/}
#menu5{list-style:none;}
.intbg{position:absolute;top:50px;left:40px;display:block;width:100px;height:98px;background:#CC66CC;/*线条颜色值*/}
#menu5 li{position:absolute;}
/*键*/
.out a{display:block;width:0;height:26px;border-top:10px transparent dotted;border-right:20px #CC66CC solid;border-bottom:10px transparent dotted;}
.out a em{display:block;width:0;height:26px;border-top:10px transparent dotted;border-left:20px #CC66CC solid;border-bottom:10px transparent dotted;position:absolute;top:0;left:19px;cursor:pointer;}
.out a b{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}
.out a{text-decoration:none;}
.out a:hover{border-right-color:#CC3300;}
.out a:hover em{border-left-color:#CC3300;cursor:pointer;}
.out a:hover b{color:#000000;cursor:pointer;}
/*填充背景色*/
.int a{display:block;width:0;height:24px;border-top:10px transparent dotted;border-right:20px #fff solid;border-bottom:10px transparent dotted;}
.int a em{display:block;width:0;height:24px;border-top:10px transparent dotted;border-left:20px #fff solid;border-bottom:10px transparent dotted;position:absolute;top:0;left:19px;}
.int a b{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;}
/*外面定位*/
#t1{left:72px;top:5px;}
#t2{left:11px;top:39px;}
#t3{left:133px;top:39px;}
#t4{left:11px;top:111px;}
#t5{left:133px;top:111px;}
#t6{left:72px;top:146px;}
/*里面定位*/
#f1{left:50px;top:38px;}
#f2{left:94px;top:38px;}
#f3{left:28px;top:76px;}
#f4{left:72px;top:76px;}
#f5{left:116px;top:76px;}
#f6{left:50px;top:115px;}
#f7{left:94px;top:115px;}
/*中心圆*/
#f4 a{text-decoration:none;border-top:10px transparent dotted;border-right:20px #FF0000 solid;border-bottom:10px transparent dotted;}
#f4 a em{display:block;border-top:10px transparent dotted;border-left:20px #FF0000 solid;border-bottom:10px transparent dotted;position:absolute;top:0;left:19px;cursor:pointer;}
#f4 a:hover{border-right-color:#CC3300;}
#f4 a:hover em{border-left-color:#CC3300;cursor:pointer;}
#f4 a:hover b{font-size:14px;color:#fff;cursor:pointer;}
#f4 a b{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}
/*综合运用5-------------------------六角星*/
#menu6box{position:relative;width:182px;height:150px;margin:20px auto;background:#fff;}
#menu6{list-style:none;padding-top:10px;}
#menu6 li{width:50px;height:55px;border:1px red solid;position:relative;float:left;margin-left:5px;margin-bottom:5px;}
#menu6 li a{display:block;border-left:25px transparent dotted;border-bottom:40px red solid;border-right:25px transparent dotted;width:0;height:0;margin:0 auto; text-decoration:none;}
#menu6 li a b{display:block;border-left:25px transparent dotted;border-top:40px red solid;border-right:25px transparent dotted;width:0;height:0;position:absolute;top:15px;left:0px; z-index:1; cursor:pointer;}
#menu6 li a em{display:block;width:20px;height:22px;position:absolute; z-index:2; top:20px;left:18px;font-size:14px;color:#fff; font-style:normal;font-weight:bold;cursor:pointer;}
#menu6 li a:hover{border-bottom-color:#000099;}
#menu6 li a:hover b{border-top-color:#000099;}
#menu6 li a:hover em{color:orange;}
Border属性的终极研究---看我七十二变Border属性的终极研究---看我七十二变原创:冰极峰
新Blog地址:http://www.cnblogs.com/binyong
border的基本形状
四条边框的基本变化
默认样式 | 米字格 | 左右透明 | 上下透明 |
相邻两条边框组成45度斜角
相邻三条边框组成三角形
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]