怎麼樣用CSS製作可自動延展的圓角矩形?

各位好:

TKY對於一個CSS的問題一直很頭疼。
TKY喜歡用圓角矩形的方式來設計區塊的標題欄和內容欄,不過一直想不出來要怎麼樣用純CSS的方式設計一個可隨著文字內容長度延展的圓角矩形框。(就是說文字多到換行時,矩形也隨之擴大)
目前用的是老方法,就是修改block的版型,把div改成table,切成九宮格的方式,在四邊末的儲存格中放入切好的原角圖片,其他的儲存格則設定為寬度:100%,讓整個table能夠隨著內容擴展並填滿側邊欄。

(不知道會不會太抽象?)

這樣一來,所有的block都會有同樣的圓角矩形樣式。不管出現在側邊欄、內容區或者哪裡都一樣。(這當然是廢話)
不過TKY在理想的狀況裡希望可以去區分block在不同地方有不同的樣式。比如在右邊欄是紅色、在左邊欄是綠色,在內容區出現時則不要以圓角矩形的方式出現......。

所以,勢必要在CSS中針對不同的區域的元素做設定才行。

問題是,TKY不知道要怎麼透過單純CSS的方式製作可自動延展的圓角矩形。
問問看板上有沒有CSS的高手可以給點指示。

TKY

Hipfox's 的頭像

Re:

參考這本書
CSS設計大師 - 進階網頁標準化設計指南
原名: CSS MASTERY ADVANCED WEB STANDARDS SOLUTIONS
原著: Andy Budd . Cameron Moll . Simon Collison
中譯: 洪志杰
出版社: 碁峰

第3章之圓角框線 有介紹固定和非固定圓角框的技巧。
在 Amazon 的網友評比 http://www.amazon.com/gp/product/customer-reviews/1590596145/sr=1-1/qid=...

tky's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

謝謝Hipfox的資訊。
TKY自己也有買過CSS的書,裡頭的介紹就是用老式九宮格法。
如果不是為了配合Drupal的區塊樣版的話,這方法其實挺不錯的。

問題就是TKY想「搞花樣」。
想問的其實是關於這方面CSS的技巧,看能否用幾張圖片就搞定,不需要每次都弄成九宮格。這樣在CSS中做設定時不會那麼累人。
一般看網路上的CSS教學,都著重在圖片的橫向擴展。如果文字換行或DIV被撐長了,通常就會「破功」。

不需要精緻的程式碼,有人能講個原理就夠了。

tky

tky

charlesc's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

做圓角的方法百百種,Drupal 有個模組不錯用!
Rounded corners

dionysian's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

有本是介紹用css方式編排的,書名是 CSS 功能索引式參考手冊(旗標出版)書本編號F5470.
版面被撑破,可以設定自動換行,此書也有教.

ddtet's 的頭像

Re:

因為很多的引用的文章都是英文... 所以剛睡醒的我沒有力氣去細看。
有重覆的話請見諒... 幾個月前偶然的情形下發現用CSS作圓角柜形的作法,發現比我再之前用背景圖作的圓角簡單,也更有彈性。
(原來作的圓角其實就可以依寬度不同變化,不過不能改顏色... 因為是圖片嘛~~)

原來的那篇文章我已經找不到了....
重新在 Google 上找到了另一篇...連結

原理其實不難,就是用 padding去讓區塊"縮"起來...用堆積木的方式堆出來的。
(不過當時我看到的是用 div 而不是 b 堆出來的)

圖示: (因為網頁會忽略空白,排版不易... 只作"一邊"的圖示)
div 1 (padding-right:3px) █████████
div 2 (padding-right:2px) ██████████
div 3 (padding-right:1px) ███████████
div 4 (padding-right:0px) ████████████
div 4 (padding-right:0px) ████████████
( 兩個 div 4 是同一個 div, height:2px , 其它的 height:1px)

這樣圖形就被"畫"出來了。雖然沒用過表格的方式,不過原理應該是差不多的吧!

我只是一個撰碼員,靠寫程式過活。
自從 Drupal 在 4.7 版的時候知道他的存在,但是後來跳去其它程式語言很久沒回來。
變成 D5 比較熟,D6 知道一點,D7 還在學的狀況…

tky's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

堆積木的方式TKY也有想過,不過就是色彩上比較麻煩。
如果你想要做漸層色彩的話,應該就很困難了吧?

TKY已經下了charlesc講的圓角模組,試過了之後再向大家報告!

tky

tky

imnicky84's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

不好意思問個問題,我用RoundedCornr這個網站做了我要的圓角區塊,然後把它的html code放到新增的區塊裡面,
但是顏色好像會被版型的css蓋過去,顏色出不來。請問我是要把它的css code放到版型的css嗎?但是我只是要某一區塊呈
現圓角區塊,這樣不會所有的區塊設定都便成圓角了嗎

charlesc's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

在加CSS code時,確定前面的class/id是你想要修改的區域即可摟。

imnicky84's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

它給了html code如下

還有css code
.roundedcornr_box_356968 {
background: url(roundedcornr_356968_tl.png) no-repeat top left;
}
.roundedcornr_top_356968 {
background: url(roundedcornr_356968_tr.png) no-repeat top right;
}
.roundedcornr_bottom_356968 {
background: url(roundedcornr_356968_bl.png) no-repeat bottom left;
}
我是要把css code 貼到版型的css裡嗎?不過這樣右欄的區塊就整個都是我貼的顏色了,我只是想要其中的一個區塊要怎麼做?
貼到區塊下的"設定'嗎?

charlesc's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

.roundedcornr_bottom_356968 改成 該區塊的 CSS class,例如 .block-1

tky's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

試用過Rounded corners模組,不過弄不出結果來。
不曉得是用錯方法還是怎麼著,總之看不到任何的圓角邊框。
而且官網上顯示的範例圖案,只有在IE中正常顯示;在firefox就不行了。
因為弄不出來,不曉得實際上用在網站中的時候會怎麼樣。

另外,RoundedCornr這個網站做出來的圓角挺不錯的。
研究了一下它的CSS,果然比九宮格高明多了,不用積木堆,鋸齒相對可以減低一些。

多謝各位啊!

tky

tky

Hipfox's 的頭像

Re: 怎麼樣用CSS製作可自動延展的圓角矩形?

又來一個 css 的圓角作法 http://www.spiffycorners.com/sc.php
跟 Rounded corners 一樣,都是純色塊的表現。