html - 用 div 做一个圆圈的替代方法

Question

我有一个使用 css 3 的 div，我正在放置一个圆圈，但是当我放置对象时，它超出了圆圈，因为 div 仍然存在并且它是矩形。

我可以用一些东西代替 div 来制作圆圈吗？我的目标是我需要一个圆圈，当我放置物体时，它不应该移出圆圈。

谢谢

Answer 1

没有实际的方法可以使元素循环。您可以使用众所周知的 border-radius“技巧”使其看起来圆形。

要创建 div 的文本/内容仅在圆圈边界内的效果，您可以确保它填充在圆圈中包含的最大正方形内，使用 填充。这是一个视觉插图:

这是一个演示:little link .

HTML:

<div>
   Glee is awesome! Glee!
</div>

CSS:

div {
    border: 1px solid black;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    padding: 15px;
    height: 70px;
    width: 70px;
    overflow: hidden;
}

编辑:对于图像，您有两种情况:

• 您希望 div 具有圆形背景。在这种情况下，请使用 background-clip: padding-box; 属性(您需要带有供应商前缀的版本才能工作)。这是一个演示:little link .

• 您的 div 中有一个 img 标记——您可以使用之前的方法。