css案例学习之span边框实现的特殊效果

bottom left

bottom right

top left

top right

 

配合颜色来使用,实现一些神奇的效果

#menu a span{
         height:0;
         width:0;
         /*border-top:solid 6px #fff;
         border-left:solid 6px #f90;*/
         /*border-top:solid 6px #fff;
         border-right:solid 6px #f90;*/
         /*border-bottom:solid 6px #fff;
         border-left:solid 6px #f90;*/
         border-bottom:solid 6px #fff;
         border-right:solid 6px #f90;
         position:absolute;
         top:0;
         left:0;
         overflow:hidden;
         }

说明:当span的height、width设置为0的时候,配合border的样式,就能实现神奇的边框效果

 

完整代码如下

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">


        

    "Content-Type" content="text/html; charset=utf-8" />

自适应的水平的菜单


    

实现了一种被裁减的感觉

你可能感兴趣的:(css案例学习之span边框实现的特殊效果)