隨著越來越多的主流浏覽器對這些標准的支持,我們已經可以使用其中一些技術來美化頁面了。
不必再通過圖片來創造具有漸變圓角效果的按鈕,會方便很多。
完整代碼示例請到 http://www.alleyloft.com/contents/share?id=2 下載
<div class="main"> <!--css3自定義漸變圓角按鈕樣式--> <input type="submit" class="btn-style-01" value="提交" /> <!--css3自定義漸變圓角按鈕樣式--> </div> <style type="text/CSS"> .btn-style-01{ border-style:none; padding:8px 30px; line-height:24px; color:#fff; font:16px "Microsoft YaHei", Verdana, Geneva, sans-serif; cursor:pointer; border:1px #ae7d0a solid; -webkit-box-shadow:inset 0px 0px 1px #fff; -moz-box-shadow:inset 0px 0px 1px #fff; box-shadow:inset 0px 0px 1px #fff;/*內發光效果*/ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;/*邊框圓角*/ text-shadow:1px 1px 0px #b67f01;/*字體陰影效果*/ background-color:#feb100; background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#feb100), to(#e8a201)); background-image: -webkit-linear-gradient(top, #feb100 0%, #e8a201 100%); background-image: -moz-linear-gradient(top, #feb100 0%, #e8a201 100%); background-image: -ms-linear-gradient(top, #feb100 0%, #e8a201 100%); background-image: -o-linear-gradient(top, #feb100 0%, #e8a201 100%); background-image: linear-gradient(top, #feb100 0%, #e8a201 100%);/*顏色漸變效果*/ } .btn-style-01:hover { background-color:#e8a201; background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#e8a201), to(#feb100)); background-image: -webkit-linear-gradient(top, #e8a201 0%, #feb100 100%); background-image: -moz-linear-gradient(top, #e8a201 0%, #feb100 100%); background-image: -ms-linear-gradient(top, #e8a201 0%, #feb100 100%); background-image: -o-linear-gradient(top, #e8a201 0%, #feb100 100%); background-image: linear-gradIEnt(top, #e8a201 0%, #feb100 100%); } </style>