当通过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中测试并使用。

Answer 2

只需将以下属性添加到.circle：

-webkit-transform:scale(0.7,0.7);
   -moz-transform:scale(0.7,0.7);
        transform:scale(0.7,0.7);