当使用CSS将DIV显示为圆形时，背景颜色小于DIV尺寸。

Question

我有一个div，使用以下CSS呈现为圆形，并在示例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/

- user3727533

Answer 1

尝试使用径向渐变：

JSFiddle

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

请注意，这在某些浏览器中无法正常工作，在其他浏览器中您需要使用供应商前缀。在Chrome和IE中测试并可用。

- Niet the Dark Absol

---

如果你使用 background:radial-gradient(#000 35px,transparent 36px);，看起来会更加顺滑。 - tgogos

Answer 2

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

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

- Luca Detomi

---

内部div不会是100像素，对吧？ - Niet the Dark Absol