您的位置：首页 > Web前端 > CSS

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

2015-11-30 16:33 741 查看


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;
}


<div id="menu">
<a href="#">
<span class="left"></span>
Home </a>
<a href="#">
<span class="left"></span>
Contact Us </a>
<a href="#">
<span class="left"></span>
Web Dev </a>
<a href="#">
<span class="left"></span>
Web Design </a>
<a href="#">
<span class="left"></span>
Map    </a>
</div>


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

完整代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
#menu {
font-family:Arial;
font-size:14px;
}

#menu a, #menu a:visited {
display:block;
float:left;
position:relative;
background-color:#c00;
color:#fff;
text-decoration:none;
padding:6px;
margin:1px 0 0 1px;
}

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

#menu a:hover{
background-color: #F90;
color:#333
}

#menu a:hover span{
border-bottom:solid 6px #f90;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>自适应的水平的菜单</title></head>

<body>
<div id="menu">
<a href="#">
<span class="left"></span>
Home </a>
<a href="#">
<span class="left"></span>
Contact Us </a>
<a href="#">
<span class="left"></span>
Web Dev </a>
<a href="#">
<span class="left"></span>
Web Design </a>
<a href="#">
<span class="left"></span>
Map    </a>
</div>
</body>
</html>


实现了一种被裁减的感觉

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航