创建圆形 div 比使用图像更简单的方法?

Easier way to create circle div than using an image?(创建圆形 div 比使用图像更简单的方法?)

问题描述

我想知道是否有比我现在做的更简单的方法来创建圆形 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:

<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 比使用图像更简单的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！