CSS3 是當前 Web 前端開發中重要的一部分,其中包含了豐富的特性。本文主要講述 CSS3 中邊框與動畫相關的內容。
/* 設置邊框 */ div { border: 1px solid #000; border-radius: 5px; box-shadow: 0 0 5px #ccc; } /* 添加動畫 */ div:hover { animation: shake 0.5s; } @keyframes shake { 0% { transform: rotate(0deg); } 20% { transform: rotate(20deg); } 40% { transform: rotate(-20deg); } 60% { transform: rotate(20deg); } 80% { transform: rotate(-20deg); } 100% { transform: rotate(0deg); } } /* 邊框圖片 */ div { border-image: url(border.png) 30 30 round; }
CSS3 中邊框可使用 border 屬性,指定邊框的粗細、樣式和顏色。同時,可以使用 border-radius 屬性,設置圓角。當然,還可以使用 box-shadow 屬性,添加邊框陰影。另外,也可以設置邊框圖片,使用 border-image 屬性即可。
而動畫方面,CSS3 中提供了 animation 屬性,可以為元素設置動畫效果。同樣,使用 @keyframes 來定義動畫的具體細節,可以設置元素在某個時間點上的動畫效果,隨后通過 animation 屬性添加至元素即可。
總之,在實際開發中,CSS3 邊框與動畫都是非常實用的技術。存在即合理,更多的應用等待著開發者去挖掘。