CSS画iOS文件夹效果

文件夹效果在iOS界面设计中非常常见，通过CSS可以轻松实现这种效果。下面我将为大家介绍如何使用CSS画iOS文件夹效果。

步骤一：HTML结构

<div class="folder">
<div class="folder-header">
<span class="name">文件夹名称</span>
<span class="icon"></span>
</div>
<ul class="folder-list">
<li><a href="#">文件1</a></li>
<li><a href="#">文件2</a></li>
<li><a href="#">文件3</a></li>
</ul>
</div>

步骤二：CSS样式

.folder {
background-color: #F5F5F5;
border: 1px solid #D9D9D9;
border-radius: 5px;
overflow: hidden;
margin: 20px;
width: 300px;
}
.folder .folder-header {
background-color: #F5F5F5;
border-bottom: 1px solid #D9D9D9;
padding: 10px;
position: relative;
}
.folder .folder-header .name {
font-size: 18px;
}
.folder .folder-header .icon {
background-color: #007AFF;
border-radius: 50%;
display: block;
height: 10px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 10px;
}
.folder .folder-list {
margin: 0;
padding: 0;
}
.folder .folder-list li {
list-style: none;
padding: 10px;
}
.folder .folder-list li:nth-child(odd) {
background-color: #FFF;
}
.folder .folder-list li:nth-child(even) {
background-color: #F5F5F5;
}

步骤三：效果展示

通过以上三个步骤，我们就可以轻松地使用CSS画出iOS文件夹效果了。