<!
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 >
< 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 >