CSS3.0是CSS的最新版本,它包含了許多新的特性和模塊。這些新的特性和模塊能夠為我們提供更加強大、更加靈活的控制頁面樣式的方式。下面就介紹一些CSS3.0的實用案例。
/*圓角盒子*/ .box{ border-radius: 10px; -moz-border-radius: 10px;/*火狐瀏覽器處理*/ -webkit-border-radius: 10px;/*Webkit內核瀏覽器處理*/ } /*陰影效果*/ .box{ box-shadow: 5px 5px 5px #888888; -moz-box-shadow: 5px 5px 5px #888888;/*火狐瀏覽器處理*/ -webkit-box-shadow: 5px 5px 5px #888888;/*Webkit內核瀏覽器處理*/ } /*漸變背景*/ .box{ background: -moz-linear-gradient(top, #efefef 0%, #ffffff 100%);/*火狐瀏覽器處理*/ background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#ffffff));/*Webkit內核瀏覽器處理*/ } /*旋轉效果*/ img{ transform: rotate(45deg); -moz-transform: rotate(45deg);/*火狐瀏覽器處理*/ -webkit-transform: rotate(45deg);/*Webkit內核瀏覽器處理*/ } /*動畫效果*/ @keyframes example { 0% {background-color: red; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 75% {background-color: green; left:0px; top:200px;} 100% {background-color: red; left:0px; top:0px;} } .box{ animation-name: example; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
通過CSS3.0的這些優秀特性的運用,可以大大提升我們制作頁面的效率。我們不需要再使用圖片或其他方式實現特定的效果,而是通過代碼實現即可。因此,我們應該更加深入地掌握CSS3.0,以便更好地實現我們的設計和開發。
上一篇css3.0網頁