7.18.2010

CSS3 圓角效果

image

  • 圓角 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 留言:

發佈留言

您使用留言則表示同意及遵守使用條款及守則

建議: 為方便留言回覆,請不要用匿名方式 留言。