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文件夾效果了。