CSS边框样式详解-优快云博客

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title>border-style的outset属性</title>

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