網頁設計

關於網頁設計的技術或相關資訊分享

好站推薦─圓角產生器RoundedCornr

RoundedCornr

  在做網頁設計的時候,常常會要用到圓角,今天來介紹一下好用網站 RoundedCornr ,這個網站讓你簡單的設定後,就可以輕鬆的作出圓角,連圖片、Html及CSS都幫你搞定好了,只要抓回去修改一下就可以用了。

能製作的圓角有

  • Basic RoundedCornr: 單色的圓角背景
  • RoundedCornr with Gradient: 漸層色的圓角背景
  • RoundedCornr with Border: 圓角邊框
  • Single RoundedCornr Image: 圓角圖案,可在圖案上面打文字,可以拿來當簡易的按鈕使用。

  設定好各選項後,按下【Create RounderCornr >>】,就會顯示出一個demo網頁,上面有效果呈現圖,下面則是Html、CSS還有圖檔,下載圖檔到電腦中,再上傳到自己的server上去,修改一下Html還有CSS就可以用了,眼見為憑,下面是一些範例

 

網頁設計 】好站推薦-圓角產生器RoundedCornr:這是示範區塊,單色的圓角背景。

 

 

 

網頁設計 】好站推薦-圓角產生器RoundedCornr:這是示範區塊,漸層色的圓角背景。

 

 

 

網頁設計 】好站推薦-圓角產生器RoundedCornr:這是示範區塊,圓角邊框。

 

 

RoundedCornr

 

  也可以做到像上圖這樣,兩個角圓角兩個角直角。

  目前知道的問題是圓角邊框的範例,當你的內容太多,導致整個區塊的高度太高時,左邊的框線有可能會不夠長,這是因為他的左邊框線和左上角的圓角,是使用一個1024*600的圖片去做的,因此當內容的高度大於他所能顯示的高度的時候,他就會因為圖片不夠大而斷掉了,而他的右框線卻是用另外一個5*1的細線去 repeat-y,因此不管內容多高都可以正確顯示,還有另外一個問題是,當內容太少的時候,內容的高度小於圓角的半徑時,顯示上也有可能出錯,不過這可以透過margin輕易的解決掉。

  這是用圖片的方法來實現圓角的做法,要做出圓角的方法有很多種,可以只用CSS就達成,但萬惡的網路探險家(IE),在某些情況下會無法達成效果,因此今天先介紹用圖片的方法,這個是一定可以達成的方法,但是不一定會比較快,也因為要下載圖片,因此對網頁的開啟速度也會有影響。

Please enable the javascript to submit this form