HTML 和 CSS 流體圈

Question

我正在嘗試使用 HTML 和 CSS 創建一個流體循環。 我幾乎完成了，但由於它應該是流動的並且里面的內容是動態的，所以它的形狀從圓形變成了橢圓形等等。

 body { position: relative; }.notify { position: absolute; top: 100%; left: 20%; background: red; border: 2px solid white; border-radius: 50%; text-align: center; }.notify > div { padding: 20px; }

 <div class="notify"> <div> 12 </div> </div>

你能幫我嗎？

Answer 1

您正在使用的border-radius:50% hack 假設<div>在應用圓角之前是方形的，否則它將產生橢圓而不是圓形，正如您所指出的那樣。

因此，如果您希望圓圈在內容擴展時保持圓形，則需要動態調整高度以匹配寬度。 您可能需要使用 Javascript 來實現這一點。

另外請注意，舊版本的 IE 不支持border-radius ，所以使用 IE6、IE7 或 IE8 的用戶根本看不到你的圈子。 （雖然有一個叫做CSS3Pie的 hack ）

當然，調整height會有一個副作用，就是讓元素在垂直方向上占據更多的空間。 這可能不是您想要的； 無論里面有什么內容，您可能希望圓圈大小相同？ 在這種情況下，你應該固定圓的高度和寬度，並給出內容position:absolute; 以防止它影響其父級的大小。

使用border-radius hack 生成圓的另一種方法是使用 SVG。 SVG 是嵌入到大多數瀏覽器中的矢量圖形格式。

同樣，值得注意的例外是 IE8 和更早版本，但 IE 支持稱為 VML 的替代格式。 存在各種可以在 SVG 和 VML 之間轉換的腳本，因此您可以使用 SVG 和 Javascript 生成跨瀏覽器解決方案。

如果我們要接受 Javascript 是解決方案的一部分，您可以簡單地首先使用 javascript 庫來繪制它。 我對此的建議是Raphael ，它會根據運行它的瀏覽器生成 SVG 或 VML 圖形。

希望有幫助。

Answer 2

您需要將width和height都設置為這兩者中的最大值，以渲染一個正方形，該正方形具有 50% 的半徑角，從而形成一個圓形。

您可以在 jQuery 中執行此操作：

$(function() {
  var $elem = $(".notify > div");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

嘗試在此處更改內容（寬度和高度）

Answer 3

僅使用 HTML 和 CSS的流體循環示例。 正如我在對該問題的評論中提到的，該技術在我的博客文章中進行了解釋。 同樣如前所述，Safari 目前在以百分比指定的邊界半徑時效果不佳。

Answer 4

像Jose Rui Santos那樣，您可以實現您的目標。 但是對你的 css 做一些改變。

就像從.notify > div中刪除填充並像這樣添加 styles ：

.notify > div
{    
    display: table-cell;
    vertical-align: middle;
}

並將填充添加到.notify class 中，如下所示：

.notify
{
    position: absolute;
    top: 100%;
    left: 20%;
    background: red;
    border: 2px solid white;
    border-radius: 50%;
    padding: 30px;
    text-align: center;

}

和Jose Rui Santos提到的 Jquery 代碼：

var $elem = $(".notify > div");
var maxSize = Math.max($elem.width(), $elem.height());
$elem.width(maxSize).height(maxSize);

請參閱工作演示： http://jsfiddle.net/2j5Ek/63/

Answer 5

你需要一種方法來強制高度/寬度，否則它只會 go 橢圓形......它可能！

在這個 html

<div class="notify">
    <div class="child">
        12334        
    </div>
</div>

這個 jQuery 腳本應該可以做到。

var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px',
    'line-height': cw + 'px'
});

Answer 6

通過設置max-width:XXpx; max-height:XXpx max-width:XXpx; max-height:XXpx將完成這項工作。

請注意，您可能需要使用 CSS3 word-wrap: break-word; 打破的話。 跨瀏覽器兼容性可能是個問題。