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

Question

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

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

谢谢

Answer 1

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

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

这是一个演示：小链接。

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;属性（您需要供应商前缀的版本才能使用）。这是一个演示：小链接。

• 您的内部有一个img标签div- 您可以使用先前的方法。

Answer 2

如果您创建一个边界半径等于它的边的 div，那么您应该拥有您正在寻找的东西。

为兼容 CSS3 的浏览器创建圆形 div

Answer 3

在 HTML5 中有一个叫做 canvas 的元素。它可用于绘制、使用 javascript，因此也可用于动画。如果您只想画画，这可能会对您有所帮助。否则，您可以使用 css 中的 z-index 属性

Answer 4

创建一个 div 并给它边界半径

   width: 230px;
   height: 230px;
   border-radius: 165px;
   -webkit-border-radius: 165px;
   -moz-border-radius: 165px;