无风kiseki

博客园 首页 新随笔 联系 订阅 管理

圆角css代码,原文:http://www.blogohblog.com/nifty-rounded-edges-using-only-css/comment-page-2/#comments

<html>
<head>
<style>
<!--

ul {
    width:180px;
    list-style-type:none;
    margin:0 auto;
    padding:0;
}

li a {
    display:block;
    position:relative;
    border-width:1px 0;
    border-color:#ccc;
    border-style:solid;
    color:#555;
    text-decoration:none;
    margin:4px 1px;
}

li a span {
    display:block;
    position:relative;
    margin:0 -1px;
    border-width:0 1px;
    border-color:#ccc;
    border-style:solid;
    background-color:#eee;
    padding:2px 6px;
}

li a:hover {
    border-color:#aaa;
    color:#333;
}

li a:hover span {
    border-color:#aaa;
    background-color:#ddd;
}

//-->
</style>
</head>
<body>
<ul>
    <li>
        <a href="#"><span>Home</span></a>
        <a href="#"><span>About</span></a>
        <a href="#"><span>Products</span></a>
        <a href="#"><span>Services</span></a>
        <a href="#"><span>Contact</span></a>
    </li>
</ul>
</body>
</html>

posted on 2009-05-28 15:15  无风kiseki  阅读(405)  评论(0编辑  收藏  举报