在导航中应用border-style的outset属性代码 [ 网站地图 ]

发表于:2009-12-14 浏览:33 作者: 来源:互联网

关键字:border-style,outset

描述:代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"> <hea

代码如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>border-style的outset属性</title>
<style type="text/css">
.bevelmenu{  font: bold 13px arial;  padding: 6px 0;  margin: 0;  width: 100%;  background-color: #FFF2BF;  text-align: left; /*将值设置为"right"菜单会向右靠拢*/  }
.bevelmenu li{  list-style: none;  display: inline;  }
.bevelmenu li a{  padding: 3px 0.5em;  text-decoration: none;  color: black;  background-color: #FFF2BF;  border: 2px solid #FFF2BF;  }
.bevelmenu li a:hover{  color: black;  background-color: #FFE271;  border-style: outset;  }
html>body .bevelmenu li a:active{ /* 鼠标按下的效果只有非IE浏览器才支持 */  border-style: inset;  }  </style>
</head>
 
<BODY>
<ul class="bevelmenu"><li><a href="http://www.sina.com">新浪</a> </li><li><a href="http://www.163.com">网易</a> </li><li><a href="http://www.baidu.com">Baidu</a> </li><li><a href="http://www.yahoo.com">yahoo</a> </li><li><a href="http://www.google.com">Google</a> </li></ul>
</BODY>
</html>

如果用inset属性就有种凹陷的感觉,与outset属性正好相反!

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>border-style的outset属性</title>
<style type="text/css">
.bevelmenu{  font: bold 13px arial;  padding: 6px 0;  margin: 0;  width: 100%;  background-color: #FFF2BF;  text-align: left; /*将值设置为"right"菜单会向右靠拢*/  }
.bevelmenu li{  list-style: none;  display: inline;  }
.bevelmenu li a{  padding: 3px 0.5em;  text-decoration: none;  color: black;  background-color: #FFF2BF;  border: 2px solid #FFF2BF;  }
.bevelmenu li a:hover{  color: black;  background-color: #FFE271;  border-style: outset;  }
html>body .bevelmenu li a:active{ /* 鼠标按下的效果只有非IE浏览器才支持 */  border-style: inset;  }  </style>
</head>
 
<BODY>
<ul class="bevelmenu"><li><a href="http://www.sina.com">新浪</a> </li><li><a href="http://www.163.com">网易</a> </li><li><a href="http://www.baidu.com">Baidu</a> </li><li><a href="http://www.yahoo.com">yahoo</a> </li><li><a href="http://www.google.com">Google</a> </li></ul>
</BODY>
</html>


站长资讯网 做中国最丰富的资讯网站 沪ICP备05004089号