CSS現(xiàn)在時(shí)間代碼是網(wǎng)頁開發(fā)中常用的代碼之一。通過使用CSS，我們可以輕松地在網(wǎng)頁中展示當(dāng)前時(shí)間。下面是一個(gè)簡(jiǎn)單的CSS代碼：

body {
background-color: #F5F5F5; /* 背景顏色 */
}
.clock {
display: inline-block; /* 設(shè)置為內(nèi)聯(lián)塊級(jí)元素 */
font-family: Arial, sans-serif; /* 字體 */
font-size: 48px; /* 字體大小 */
text-align: center; /* 居中顯示 */
padding: 20px 50px; /* 內(nèi)邊距 */
border: 3px solid #333; /* 邊框 */
color: #333; /* 字體顏色 */
box-shadow: 0 0 0 5px #F5F5F5, 0 0 20px rgba(0, 0, 0, 0.2); /* 盒子陰影 */
}
.clock:before {
content: ""; /* 偽元素 */
display: block;
position: absolute;
top: 50%; /* 居中 */
left: 50%; /* 居中 */
transform: translate(-50%, -50%); /* 居中 */
width: 14px; /* 小圓點(diǎn)大小 */
height: 14px; /* 小圓點(diǎn)大小 */
background-color: #333; /* 小圓點(diǎn)顏色 */
border-radius: 50%; /* 圓角 */
box-shadow: 0 0 0 2px #F5F5F5, 0 0 0 6px #333; /* 盒子陰影 */
}
.clock .hour-hand {
position: absolute; /* 絕對(duì)定位 */
top: 50%; /* 居中 */
left: 50%; /* 居中 */
transform-origin: 50% 100%; /* 原點(diǎn)設(shè)置 */
height: 35%; /* 時(shí)針長度 */
width: 6px; /* 時(shí)針寬度 */
background-color: #333; /* 時(shí)針顏色 */
}
.clock .minute-hand {
position: absolute; /* 絕對(duì)定位 */
top: 50%; /* 居中 */
left: 50%; /* 居中 */
transform-origin: 50% 100%; /* 原點(diǎn)設(shè)置 */
height: 50%; /* 分針長度 */
width: 4px; /* 分針寬度 */
background-color: #333; /* 分針顏色 */
}
.clock .second-hand {
position: absolute; /* 絕對(duì)定位 */
top: 50%; /* 居中 */
left: 50%; /* 居中 */
transform-origin: 50% 100%; /* 原點(diǎn)設(shè)置 */
height: 55%; /* 秒針長度 */
width: 2px; /* 秒針寬度 */
background-color: #E91E63; /* 秒針顏色 */
z-index: 2; /* 設(shè)置層級(jí) */
}
.clock .center-circle {
position: absolute; /* 絕對(duì)定位 */
top: 50%; /* 居中 */
left: 50%; /* 居中 */
transform: translate(-50%, -50%); /* 居中 */
width: 14px; /* 圓的大小 */
height: 14px; /* 圓的大小 */
background-color: #FFF; /* 圓的顏色 */
border: 3px solid #333; /* 圓的邊框 */
border-radius: 50%; /* 圓角 */
}

該代碼使用了偽元素、絕對(duì)定位、變形等CSS技術(shù)，在頁面中實(shí)現(xiàn)了一個(gè)時(shí)鐘。使用這種方式可以在頁面中直接顯示當(dāng)前時(shí)間而不需要使用JavaScript。當(dāng)然，由于CSS的局限性，這種方法只能展示時(shí)、分、秒三個(gè)時(shí)間單位。