圓角盒技術

Question

有誰知道使用CSS創建圓角盒的很好的例子：

1. 所有的4個角和4個側面圖像。雙方已經反覆img
2. 寬度不變，而高度靈活
3. 工作都在FF 3.x中，IE 7或以上版本，Chrome

讓我知道。謝謝

Answer 1

那麼，你可以用3個div來做到這一點。

<div class="bg"><div class="top"><div class="bot">text here</div></div></div> 

bg會對CSS像

background: url(path/to/repeated/background.gif) repeat-y; 

凡背景跨越div的整個寬度，因爲它是恆定的。這將平鋪你的左右兩側。

然後對於頂部和底部只使用圖像與no-repeat top left;和no-repeat bottom left。他們每個人都有兩個角落，加上所有形象的善良。

希望如果您對CSS有足夠的理解，可以從中填寫詳細信息。是

Answer 2

我還不知道任何這樣的代碼。但我知道一個沒有圖像的css圓角的最佳代碼。

看看這個link

它在所有瀏覽器的工作，易於實現。偉大的事情是它在ie6中運行良好！..偉大的無..

Answer 3

CSS3屬性爲邊界的圖像，如下所示：

 
border-image: 
border-top-image 
border-right-image 
border-bottom-image 
border-left-image 
border-corner-image: 
border-top-left-image 
border-top-right-image 
border-bottom-left-image 
border-bottom-right-image 

實施例：

 
border-image: url(border.png) 27 27 27 27 round round; 

從Mozilla的IE，鉻不同，Safari瀏覽器即 使用屬性開始-moz比其他-webkit

欲瞭解更多解釋ñ關於這些屬性請看這些定義和例子。

Source1， Source2