当通过CSS显示为圆形时,DIV背景颜色小于div大小

Question

我有一个使用以下CSS的圆形形状的div,并与示例html一起显示.有了这个,你有一个粉红色的盒子,里面有一个黑色的圆圈.我想做的是,不要以任何方式缩小内部div,使黑色圆圈变小.所以,最后,外部div是100px高和宽,内部div是100px高和宽,但黑色圆圈只有内部div的70%并且居中.

.circle
{
    border-radius:50%;
    background:#000;
}

<div style="background:pink;width:100px;height:100px" >
    <div class="circle"  style="width:100px;height:100px">

   </div>
</div>

http://jsfiddle.net/ansancle/P8MY6/

Answer 1

尝试径向渐变:

的jsfiddle

background:radial-gradient(#000 35px,transparent 35px);

请注意,这不适用于某些浏览器,而在其他浏览器中则需要供应商前缀.在Chrome和IE中测试并使用.