CSS作為前端開發的重要組成部分，是實現頁面樣式的重要工具。在CSS中，我們可以通過偽類選擇器來獲取到一些特定狀態的元素，包括系統時間。下面通過一個實例來演示如何在CSS中調用系統時間。

.time{
color: #000;
font-size: 24px;
}
.time::before{
content: attr(data-time);
}
/*獲取系統時間*/
function getTime(){
var d = new Date();
var hour = d.getHours().toString().padStart(2, '0');
var minute = d.getMinutes().toString().padStart(2, '0');
var second = d.getSeconds().toString().padStart(2, '0');
var time = hour + ":" + minute + ":" + second;
document.querySelector('.time').setAttribute('data-time', time);
}
setInterval(getTime, 1000);

在上述代碼中，我們通過偽類選擇器`::before`來為`.time`元素添加系統時間。同時，在JavaScript中，我們使用`setInterval()`方法來定時獲取系統時間并更新到頁面中。需要注意的是，在使用`setInterval()`方法時調用的函數需要使用`getAttribute()`方法來獲取元素的屬性值，并使用`setAttribute()`方法來設置屬性值，這樣才能實現元素屬性值的動態更新。

以上就是在CSS中調用系統時間的方法，同時也讓我們了解了一些關于JavaScript和CSS的基礎知識。在實際開發中，我們可以根據具體需求靈活運用CSS和JavaScript，實現更加美觀和實用的頁面效果。