- 圓角 border-radius 屬性:
- Firefox 瀏覽器
- -moz-border-radius-topright:5px; /*上右*/
- -moz-border-radius-topleft:5px; /*上左*/
- -moz-border-radius-bottomright:5px; /*下右*/
- -moz-border-radius-bottomleft:5px; /*下左*/
- Safari 和 Chrome 瀏覽器
- -webkit-border-top-right-radius:5px; /*上右*/
- -webkit-border-top-left-radius:5px; /*上左*/
- -webkit-border-bottom-right-radius:5px; /*下右*/
- -webkit-border-bottom-left-radius:5px; /*下左*/
以 Firefox 瀏覽器為例圓角樣式簡寫解說:
-moz-border-radius: 5px; /*四邊一起宣告相同值*/
-moz-border-radius: 2px 5px; /*順序為上左下右、上右下左*/
以 Safari 和 Chrome 瀏覽器
-webkit-border-radius: 5px; /*四邊一起宣告相同值*/
-webkit-border-radius: 2px 5px; /*順序為上左下右、上右下左,其中不可有 0 的值*/
各瀏覽器支援圓角樣式寫法 :
Firefox 瀏覽器:
-moz-border-radius: 5px;
Safari 和 Chrome 瀏覽器:
-webkit-border-radius: 5px;
Opera 10.5 +瀏覽器:
border-radius: 5px;
IE 瀏覽器不支援
border-radius 屬性範例解說<style type="text/css"> <!-- .border_rounded{ border-radius: 6px; /* Opera 10.5+ */ -moz-border-radius: 6px; /* Firefox */ -webkit-border-radius: 6px; /* Safari 和 Chrome */ background: #fff; /* 背景色 */ border: 2px solid #666; /* 邊框樣式 */ padding: 5px; /* 邊框空白 */ } --> </style> <input type="text" size="15" value="文字表單圓角" class="border_rounded" /> <input type="button" value="按鈕圓角" class="border_rounded" /> <div class="border_rounded"> 圓角區塊範例 </div>
0 留言:
發佈留言
您使用留言則表示同意及遵守使用條款及守則。
建議: 為方便留言回覆,請不要用匿名方式 留言。