您在這裡

首頁 » Forums » 疑難雜症 » 版型/Themes

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

tky's 的頭像
由 tky 在 2007-06-01 (週五) 11:22 發表

各位好：

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

（不知道會不會太抽象？）

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

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

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

TKY

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

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

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

tky

tky

因為很多的引用的文章都是英文... 所以剛睡醒的我沒有力氣去細看。
有重覆的話請見諒... 幾個月前偶然的情形下發現用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 還在學的狀況…

不好意思問個問題，我用RoundedCornr這個網站做了我要的圓角區塊，然後把它的html code放到新增的區塊裡面，
但是顏色好像會被版型的css蓋過去，顏色出不來。請問我是要把它的css code放到版型的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裡嗎？不過這樣右欄的區塊就整個都是我貼的顏色了，我只是想要其中的一個區塊要怎麼做？
貼到區塊下的"設定'嗎？

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

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

多謝各位啊！

tky

tky