CSS3是一項(xiàng)用于網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)，其中包括了一些新的特性，如：圓角、加陰影和漸變等。

在本文中，我們將會(huì)學(xué)習(xí)如何使用CSS3來(lái)設(shè)計(jì)一個(gè)漂亮的視頻播放器。

.video-container {
width: 640px;
height: 360px;
margin: 0 auto;
background-color: #333333;
position: relative;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: fill;
}
.video-controls {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
}
.play-pause-btn {
color: #fff;
font-size: 14px;
margin-left: 20px;
cursor: pointer;
}
.play-pause-btn:hover {
color: #00ffff;
}
.time-stamp {
color: #fff;
font-size: 14px;
margin-right: 20px;
}
.fullscreen-btn {
color: #fff;
font-size: 14px;
margin-right: 20px;
cursor: pointer;
}
.fullscreen-btn:hover {
color: #00ffff;
}

在上述代碼中，我們首先創(chuàng)建了一個(gè)video容器，并設(shè)置了它的寬度、高度、背景色和位置。

然后，我們給video元素添加了一個(gè)寬度為100%、高度為100%和object-fit：fill的樣式，以使視頻填充整個(gè)容器。

接下來(lái)，我們創(chuàng)建了控制條容器，并設(shè)置了它的位置、高度和背景色。

控制條容器中有三個(gè)元素：播放/暫停按鈕、時(shí)間戳和全屏按鈕。這三個(gè)元素各自具有不同的樣式，可使其更易于識(shí)別和使用。

最后，我們將鼠標(biāo)指針設(shè)置為手形光標(biāo)，以指示用戶可以點(diǎn)擊某些元素來(lái)執(zhí)行相關(guān)的操作。

通過(guò)使用這些代碼，我們可以創(chuàng)建一個(gè)簡(jiǎn)單而漂亮的視頻播放器。