為了讓網(wǎng)頁更加美觀，CSS3在前端展示方面有了很大的提升。CSS3可以添加一系列效果和動畫，讓網(wǎng)頁更加生動。

/* 為一個元素添加圓角邊框 */
div{
border-radius: 10px;
border: 4px solid #333;
padding: 20px;
}

CSS3可以通過border-radius屬性來讓邊框變成圓角。同時也可以設(shè)置邊框的寬度和顏色。

/* 添加陰影效果 */
div{
box-shadow: 5px 5px 5px #ccc;
}

通過box-shadow屬性，可以為元素添加陰影效果。其中第一個參數(shù)是設(shè)定陰影距離左邊的距離，第二個參數(shù)是陰影距離頂部的距離，第三個參數(shù)是模糊程度，第四個參數(shù)是陰影顏色。

/* 使用漸變效果 */
div{
background: linear-gradient(to bottom, #333333 0%, #ffffff 100%);
}

CSS3還支持漸變效果。可以使用linear-gradient屬性實現(xiàn)。其中to bottom表示從上到下漸變，#333333表示漸變起始顏色，#ffffff表示漸變結(jié)束顏色。

/* 使用動畫效果 */
div{
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {top: 0px;}
100% {top: 200px;}
}

CSS3還提供了各種動畫效果?？梢允褂胊nimation屬性來設(shè)置動畫。其中mymove是動畫名稱，5s表示動畫執(zhí)行時間，infinite表示動畫無限循環(huán)。@keyframes用于定義動畫中的每一幀的屬性。