最简单的圆角列表，圆角看起来还是好看

最新推荐文章于 2021-06-30 11:10:57 发布

老朱-yubing

最新推荐文章于 2021-06-30 11:10:57 发布

阅读量1k

点赞数

分类专栏：程序设计

本文链接：https://blog.csdn.net/robinhunan/article/details/54944611

版权

程序设计专栏收录该内容

42 篇文章 0 订阅

订阅专栏

显示效果如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.panel {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
	overflow: hidden;
}
.panel .head {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel .head {
    padding: 10px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.panel a{
    position: relative;
    display: block;
    padding: 10px 15px;
    background-color: #fff;
    border-top: 1px solid #ddd;
}
</style>
</head>

<body>
<div class="panel">
    <div class="head">
        列表标题
    </div>
	<a href="#">列表项目</a>
	<a href="#">列表项目</a>
	<a href="#">列表项目</a>
	<a href="#">列表项目</a>
	<a href="#">列表项目</a>
	<a href="#">列表项目</a>
</div>

</body>
</html>