CSS模仿蘋果日期選擇的效果是一種經典的前端界面設計方法，很多網站和APP都在使用這種效果。下面，我們來介紹如何使用CSS實現蘋果日期選擇的效果。

/* CSS代碼開始 */
.date-picker{
position:relative;
width:200px;
.date-input{
width: 100%;
height:30px;
padding:5px;
border: 1px solid #ccc;
text-align:center;
cursor:pointer;
}
.date-popup{
position:absolute;
top:40px;
left:0;
width:100%;
border:1px solid #ccc;
background:#fff;
z-index:9999;
.date-content{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.date-item{
width: calc(100%/7);
height: 30px;
line-height:30px;
text-align:center;
cursor:pointer;
&:hover{
background:#f2f2f2;
}
&.active{
background-color: #20a0ff;
color: #fff;
border-radius:50%;
}
}
}
}
/* CSS代碼結束 */

上面的代碼實現了一個.date-picker日期選擇器的樣式，其中.date-input是輸入框，通過點擊彈出.date-popup是日期選擇彈窗。.date-content是日期彈窗中的日期選擇框，.date-item是每個日期的選擇框，.active表示當前日期狀態。

通過CSS，我們可以輕松地模仿蘋果日期選擇的效果，讓網站或APP看起來更專業、時尚。