border-style的outset属性在导航中的应用

最新推荐文章于 2024-04-10 23:15:12 发布

张广森

最新推荐文章于 2024-04-10 23:15:12 发布

阅读量2.5k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/fgdfgasd/article/details/8812658

版权

css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

代码如下:
<!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>