CSS作為前端設計中的重要一環，常常用來美化頁面，其中日期的實現也是常用的功能之一。下面介紹幾種常見的用CSS實現日期的方法。

//1.使用before和after偽元素創建
.date::before {
content: attr(data-date);
font-size: 20px;
font-weight: bold;
color: #333;
}
.date::after {
content: "";
width: 10px;
height: 10px;
background-color: #ffcf59;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
}
//HTML
//2.使用偽元素繪制
.date {
position: relative;
width: 100px;
height: 100px;
font-size: 30px;
line-height: 100px;
text-align: center;
}
.date::before {
content: "2021";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 20px;
line-height: normal;
text-align: center;
}
.date::after {
content: "9/1";
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
line-height: normal;
text-align: center;
}
//HTML
//3.使用SVG繪制
.date-svg {
position: relative;
width: 80px;
}
.date-svg svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.date-svg text {
font-size: 20px;
font-family: Arial, sans-serif;
fill: #333;
text-anchor: middle;
dominant-baseline: middle;
}
//HTML

總的來說，利用CSS可以靈活地實現日期效果，通過細節的調整，可以達到更加美觀和符合需求的效果。