CSS3指的是最新的CSS標準,是CSS2的加強版,提供了更多的樣式與交互效果。
例如,CSS3可以實現圓角、陰影、漸變背景、旋轉、縮放、動畫等效果,讓網頁更加生動活潑。使用CSS3可以減少圖片的使用,提高頁面的加載速度,同時提升用戶的體驗感。
為了兼容性,CSS3需要添加不同的前綴,如-webkit-、-moz-、-o-等,以支持不同的瀏覽器。同時,如果使用較新的瀏覽器,直接寫對應的樣式即可,無需添加前綴。
例如,設置圓角樣式時,以不同的瀏覽器為例寫法如下: -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;
可以看出,CSS3的樣式既可以為不同的元素設置,也可以為不同狀態設置(如:hover、:active等),提高了頁面的交互性。
例如,設置按鈕在鼠標懸停過程中會出現漸變的背景及文字顏色,代碼如下: #btn1{ background: linear-gradient(to bottom, #ff8c00, #ff6e40); color: #fff; } #btn1:hover{ background: linear-gradient(to bottom, #ff6e40, #ff3d00); color: #eee; }
可以看到,CSS3樣式的使用非常靈活,可以實現許多炫酷的效果,但需要注意兼容性。