创建圆形div比使用图像更容易的方式？ [英] Easier way to create circle div than using an image?

问题描述

我想知道是否有一个更简单的方法来创建圆形div，而不是我现在做的。

I'm wondering if there's an easier way to create circular divs than what I'm doing now.

目前，我只是为每个不同的

Currently, I am just making an image for each different size, but it's annoying to do this.

有没有使用CSS让div是圆形的，我可以指定半径？

Is there anyway using CSS to make divs which are circular and I can specify the radius?

推荐答案

以下是演示： http： //jsfiddle.net/thirtydot/JJytE/1170/

CSS：

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML： b

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

要在 IE8及更早版本，您必须下载并使用 CSS3 PIE 。我上面的演示不会在IE8中工作，但是这是因为jsFiddle不托管 PIE.htc 。

To make this work in IE8 and older, you must download and use CSS3 PIE. My demo above won't work in IE8, but that's only because jsFiddle doesn't host PIE.htc.

我的演示如下：

这篇关于创建圆形div比使用图像更容易的方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！