多國語言翻譯:

展開 | 闔起

人氣:6039
b168168tw - 實用程式資料 | 2013-07-30 | 人氣:6039

如果想要設計一個4方型的圓弧外框,除了用 Photoshop 畫一個然後切板貼入,更快的方式是透過CSS3的相關語法來實現,或是透過以下的CSS圓角產生器網址來產生語法:
 

1、圓角產生器網址:http://border-radius.com/

2、輸入4角弧狀參數。

 

3、直接複製產生器中的CSS語法。

4、將弧形語法貼到目前為正方型區塊的語法之中

例如目前的正方型區塊CSS語法:

.demo {
position:              relative;
width: 100px;
height: 100px;
background: #D82F2F url(../img/about/) no-repeat left top;
}

貼入弧形語法


.demo {
position:              relative;
width: 100px;
height: 100px;
background: #D82F2F url(../img/about/) no-repeat left top;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}

 

這樣就立刻產生了一個100*100PX大小的圓弧區塊。

 

教學撰寫:徐嘉裕 Neil hsu