css表單格布局中的圓角？

Question

我的設計需要一些幫助。 我想要顯示三個相等高度的盒子，就像這個ASCI藝術：

+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+

我也有一個在線示例（使用所有CSS） 。

盒子的內容高度不同。 棘手的是這些盒子也需要圓角。 為此，我使用“推拉門”技術。 基本上，盒子的標記是這樣的：

<div class="box">
  <div class="box-header">
    <h4>header</h4>
  </div>
  <div class="box-body">
    <p>Contents</p>
  </div>
</div>

四個塊元素，所以我可以使用背景圖像制作圓角和邊框。 右上角是h4。 左上角位於框標題上。 右下角在外框div上，左下角在盒體上。

我正在使用CSS顯示：table-cell使所有三個盒子的高度相等，但這里我的問題開始了。 現在所有的盒子元素都具有相同的高度，但是盒體元素的高度不同，因為內容的高度不同。 結果：右下角未處於正確位置。 另見我發布的鏈接。

我該如何解決這個問題？ 現在所有盒子div的高度相等。 我希望盒體擴展到使用所有可用的高度，即使內容很短。 我試過身高：100％，但這不起作用。 我怎樣才能做到這一點？

還是有另一種方法來實現我想要的東西？ 我不能使用像faux這樣的東西，因為我在ems中定義了框的寬度。 這意味着我不能給盒子div提供一個提供兩個底角的背景圖像。

谷歌在這里絕對沒用。 任何涉及“角落”和“桌子”的查詢都只是給了我一個與1990年教程相關的大量鏈接，這些教程使用3x3桌子作圓角。

至於瀏覽器兼容性，如果IE7 / 8也可以處理它會很好但是不需要（在這種情況下我可以替換為不等高度的浮點數）。 對於我正在開發的網站，我估計IE市場份額為20％或更低。 我根本不關心IE6。

任何提示都非常感謝！

Answer 1

根據我上面的評論，我決定使用CSS3 border-radius來解決我的問題。 使用下面的語句，它將在除Internet Explorer之外的每個瀏覽器上顯示圓形邊框。 我不太關心IE，所以IE用戶可以簡單地看看直角。

.box {
    display: table-cell;
    width: 16em;
    padding: 1em 2em;
    background: #f6c75d url(gradient.png) repeat-x scroll top left;
    border: 3px solid #de9542;
    border-radius: 25px; /* Standard */
    -o-border-radius: 25px; /* Opera 10.x */
    -moz-border-radius: 25px; /* Mozilla/Firefox */
    -icab-border-radius: 25px; /* iCab */
    -khtml-border-radius: 25px; /* KHTML/Konqueror */
    -webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */
}

在上面，gradient.png是一個小的tileable圖像，它在框頂部提供漸變。

它完美地運作。 它還簡化了標記和CSS，並減少了我需要的背景圖像的數量和大小。

Answer 2

有解決方案，適用於Safari ， Firefox和Chrome 。 它不適用於IE，也不適用於Opera （據我測試過它 - 甚至不是10.0b）。 它使用CSS3屬性border-image 。 由於它仍然包含在工作草案中，而不是推薦，因此瀏覽器僅使用其特定前綴實現它：

#boxes {
    display: table;
    border-spacing: 1em;
}
.box-row { display: table-row; }
.box {
    width: 16em;
    display: table-cell;
    padding-right: 2em;
    border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine
    -o-border-image: url(box.png) 6 8 6 8 stretch;
    -khtml-border-image: url(box.png) 6 8 6 8 stretch;
    -icab-border-image: url(box.png) 6 8 6 8 stretch;
    -webkit-border-image: url(box.png) 6 8 6 8 stretch;
}

使用它實際上需要你重新創建背景圖像，但它是一個細節。

Answer 3

如果您不介意添加一些額外的標記，您可以實現此效果。 當然我並不是真的提倡代碼膨脹，但是如果你必須完成它，你可以雙重包裝盒子並讓每個包裝器的底角都有。 使用display: table-cell設置內包裝器的高度，你應該是金色的。

Answer 4

你能在盒體元素上使用min-height屬性嗎？

Answer 5

嘗試設置框體顯示：table-cell ？ 這可能會強制它將三個盒體渲染到相同的高度，並將圓形邊框強制到底部。

Answer 6

我希望這能得到你（我是這些論壇發布的新手）作為平面設計師，HTML的“方形”是可怕的。 我知道這不是HTML或CSS的真正修復，因為它是一個簡單的圖形解決方案。 但它效果很好，因為它是一個簡單的GIF圖像，它不會在瀏覽器中失敗。 缺點是由於試驗和錯誤需要時間，如果您更改單元格中的內容量，您可能需要更改用作圓角矩形背景的圖像。

所以，有了這個警告......

通過添加文本和測量單元格來計算所需的表格單元格的大小，或者僅查看圖像的圖像大小（以像素為單位）。

在圖形程序中創建一個任何顏色的矩形（如果你在網站上有白色文字等，請說黑色）。這個矩形是底層。

創建一個圓角矩形，例如，1像素線條粗細和NO填充顏色（線條顏色可以是您選擇的任何顏色，可以是厚度..），它是基本填充矩形的上方。 那么你將擁有一個純色方形，帶有圓角的薄輪廓。

我將圓形的未填充矩形縮小了10個像素（xy），然后我可以將它定位在正方形上等距離。

導出此圖像，例如GIF或JPEG。

在您的網站中，在頁面上單擊您希望圓角矩形所在的表格單元格，並將其設置為該單元格的BACKGROUND圖像。 確保單元格與圖像大小相同或不適合或平鋪...然后，因為它是單元格的BACKGROUND元素，所以放在單元格中的任何內容，文本或圖像都將顯示在背景圖像上方使它看起來像你有一個ROUNDED表格單元格。

您可以通過將原生圖像導出為具有透明度的GIF來使背景圖像透明（您可以使用具有更多顏色的Alhpa透明度的PNG，但我不確定網頁中的PNG圖像的完整瀏覽器支持）只需選擇基本的純色背景顏色，比如黑色，然后將其添加為透明色。

如果您有整個頁面使用CSS的背景圖像，您可能需要透明度，但是，請注意，根據使用的圖像，它可能會使文本的閱讀變得困難。

我希望這有幫助。