在網(wǎng)頁設(shè)計中，時鐘是一個非常常見的元素。使用CSS可以輕松地實現(xiàn)美觀、時尚的電子鐘效果。

.clock {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #54485f;
display: flex;
align-items: center;
justify-content: center;
}
.hour, .minute, .second {
position: absolute;
width: 4px;
border-radius: 4px;
}
.hour {
height: 60px;
background: #51bbcc;
transform-origin: bottom center;
transform: rotate(90deg);
}
.minute {
height: 80px;
background: #51bbcc;
transform-origin: bottom center;
transform: rotate(180deg);
}
.second {
height: 100px;
background: #d44e4e;
transform-origin: bottom center;
transform: rotate(-90deg);
}
.clock-face {
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #d2d2d2;
}
.clock-face::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #54485f;
top: 2px;
left: 2px;
}
.clock-face::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: #d2d2d2;
top: 4px;
left: 4px;
}

以上代碼實現(xiàn)了一個帶有時針、分針和秒針的時鐘。首先通過設(shè)置父元素的寬、高和邊框半徑來設(shè)置時鐘的整體樣式，再使用flex布局使父元素內(nèi)部的子元素居中顯示。

然后，分別創(chuàng)建時針、分針和秒針的樣式，并設(shè)置它們的高度、背景顏色、旋轉(zhuǎn)中心點(diǎn)和旋轉(zhuǎn)角度，使它們能夠在時鐘中正確顯示出當(dāng)前時間。

最后，創(chuàng)建一個樣式為.clock-face的元素，用于顯示時鐘的表盤。在該元素的內(nèi)部，還可以設(shè)置樣式為::before和::after的偽元素，用于添加表盤的細(xì)節(jié)元素。

這樣，我們就可以輕松地實現(xiàn)一個美觀、時尚的CSS電子鐘了。這不僅可以用于網(wǎng)頁設(shè)計，還可以用于其他的任何應(yīng)用場景中。