羅馬時鐘是一種古老的時間測量方式。在現代的網頁設計中，我們可以使用CSS來模仿這種時鐘的風格。下面將分享如何使用CSS實現羅馬時鐘。

/* 首先，我們需要定義羅馬數字的樣式 */
.roman-numeral {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
font-size: 150%;
}
/* 接下來，定義鐘表的主樣式 */
.clock {
width: 200px; /* 鎖表的大小 */
height: 200px;
border: 3px solid #000;
border-radius: 50%;
position: relative;
}
/* 定義鐘表的刻度 */
/* 每個刻度都是一個div元素，用偽類:after來填充羅馬數字 */
.clock .mark {
position: absolute;
border: 2px solid #000;
width: 6px;
height: 20px;
left: 50%;
top: 10px;
margin-left: -3px;
}
.clock .mark:after {
content: "I";
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
font-size: 18px;
}
/* 定義鐘表的時針 */
.clock .hour-hand {
position: absolute;
width: 8px;
height: 60px;
background-color: #000;
left: calc(50% - 4px);
top: calc(50% - 50px);
transform-origin: bottom center;
transform: rotate(30deg);
}
/* 定義鐘表的分針 */
.clock .minute-hand {
position: absolute;
width: 6px;
height: 80px;
background-color: #000;
left: calc(50% - 3px);
top: calc(50% - 80px);
transform-origin: bottom center;
transform: rotate(15deg);
}
/* 定義鐘表的秒針 */
.clock .second-hand {
position: absolute;
width: 2px;
height: 90px;
background-color: #f00;
left: calc(50% - 1px);
top: calc(50% - 90px);
transform-origin: bottom center;
transform: rotate(45deg);
}
/* 最后，讓針頭動起來 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.clock .hour-hand {
animation: rotate 12s linear infinite;
}
.clock .minute-hand {
animation: rotate 1min linear infinite;
}
.clock .second-hand {
animation: rotate 1s linear infinite;
}