如何只使用CSS创建一个中间为空心的圆形或正方形？

Question

简单来说，它应该只是一个正方形或圆形的轮廓 - 我可以相应地进行样式设置（例如将颜色更改为我想要的任何颜色，更改边框的厚度等）。

我希望将这个圆形或正方形应用于其他内容（如图像），并且中间部分应为空心的，以便您可以看到正方形或圆形下面的图像。

最好使用主要由CSS和HTML组成的方法来实现。

- marcamillion

Answer 1

试一试

div.circle {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
}

div.square {
  border: solid 21px #f0f;
  width: 50px;
  height: 50px;
}

<div class="circle">
  <img/>
</div>
 <hr/>
<div class="square">
  <img/>
</div>

More here

- Caspar Kleijne

Answer 2

你可以使用特殊字符来创建各种形状。例如：http://jsfiddle.net/martlark/jWh2N/2/

<table>
  <tr>
    <td>hollow square</td>
    <td>&#9633;</td>
  </tr>
  <tr>
    <td>solid circle</td>
    <td>&bull;</td>
  </tr>
  <tr>
    <td>open circle</td>
    <td>&#3664;</td>
  </tr>

</table>

更多特殊字符可以在此处找到：HTML特殊字符

- Martlark

Answer 3

我不知道有没有一个仅使用CSS(2.1标准)实现圆形的简单解决方案，但对于正方形，你可以轻松地实现：

.squared {
    border: 2px solid black;
}

那么，请使用以下HTML代码：

然后，使用以下HTML代码：

<img src="…" alt="an image " class="squared" />

- knittl

---

这很有趣……我只是不喜欢使用 <img> 标签。我更喜欢像上面的解决方案那样使用普通的 <div>。谢谢你。顺便说一句，我从未投过反对票。我投了赞成票 :) - marcamillion

@marcamillion：我只使用了一个图像标签，因为这并不重要。（引用：“我想将那个圆形或正方形应用于其他东西（比如一个图像之类的东西）”）- 当然你可以使用div、段落或任何其他东西。只需应用类和样式，使其符合您的喜好即可。 - knittl

@nick 因为该div是为此而制作的（默认容器），而不是用于拉取图像的img标记。我知道它不必使用它所制作的东西，但我更愿意这样做 :) @Knittl....我认为你误解了我的意思。我不是要一个正方形边框。我想创建一个50px X 50px的正方形，只是一个轮廓。就像Caspar在他的圆形示例中所做的那样-我只是将其修改为正方形。这就是我要找的。现在我要做的就是将z-index添加到它上面，放在我想要它置于顶部的元素之上。就这些 :) - marcamillion

好的，你说“将平方应用于……”，所以对我来说不是很清楚。很高兴你找到了解决问题的方法。 - knittl

Answer 4

如果你想让你的div在改变宽度/高度（例如使用js）时保持其圆形，请将半径设为50％。示例： css：

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
}

html:

<div class="circle"></div>

- nakhli

Answer 5

画圆时间！ :) 用border-radius轻松制作中空圆形：给元素添加边框和透明背景，这样你就可以透过它看到里面：

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    border-radius: 100%;
    width:100px;
    border:solid black 2px;
}

body{
    background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}

<div></div>

- coven

Answer 6

据我所知，没有一种跨浏览器兼容的方式只使用CSS和HTML来制作圆形。至于正方形，您可以使用带有边框并且z-index高于其覆盖物的div。我不明白为什么需要这样做，因为您可以在图像或“某些东西”本身上加一个边框。

如果有人知道如何使用CSS和HTML制作跨浏览器兼容的圆形，请告诉我！

@Caspar Kleijne：border-radius在IE8或更低版本中无效，不确定在9中是否有效。

- Ammi J Embry

---

IE9将支持它：https://dev59.com/-3RB5IYBdhLWcg3wZmdz - Chris

我本来没想到会这样，但因为我自己没有测试过，所以我不想确定，令人惊讶的是IE终于决定支持每个人都想要的东西。 :D - Ammi J Embry

没有 OP 设置的浏览器要求。（也许是为了娱乐或企业内部网？）OP 想在 HTML 和 CSS 中画一个圆，所以他得到了他要求的东西 ;) - Caspar Kleijne

我正在尝试实现类似Facebook的“标记”功能，即可以在图像或其他元素的某个部分进行标记。这就是为什么有人想要做这个的原因。另外，CSS2/3的border-radius实现对我来说已经足够好了。 - marcamillion

我建议您不要在您要“标记”的项目上使用额外的父级div，而是向您想要“标记”的项目添加一个带有所需CSS的CSS类。 - Ammi J Embry

Answer 7

在发现这个问题后，我在CSS Tricks上找到了这些示例：http://css-tricks.com/examples/ShapesOfCSS/ 复制一下，省得你点开。

.square {
  width: 100px;
  height: 100px;
  background: red;
}
.circle {
  width: 100px;
  height: 100px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */

<div class="square"></div>
<div class="circle"></div>

上述链接中还有许多其他形状示例，但您需要测试浏览器兼容性。

- CatShoes

Answer 8

在圆形的情况下，您只需要一个 div，但在空心正方形的情况下，您需要有 2 个 div。 这些 div 具有内联块的显示方式，您可以相应地进行更改。Live Codepen 链接：点击这里 在圆形的情况下，您只需要更改圆形的边框属性和尺寸（宽度和高度）。如果您想更改颜色，只需更改“hollow-circle”的边框颜色即可。

如果需要根据页面的背景或要放置空心正方形的元素来更改正方形的背景颜色属性。始终将内圆的尺寸保持较小，相对于空心正方形。如果要更改颜色，只需更改空心正方形的背景颜色。使用position、top、left、transform属性将内圆居中于空心正方形上，不要乱动它们。

代码如下：

/* CSS Code */

.hollow-circle {
  width: 4rem;
  height: 4rem;
  background-color: transparent;
  border-radius: 50%;
  display: inline-block;
  
  /* Use this */
  border-color: black;
  border-width: 5px;
  border-style: solid;
  /* or */
  /* Shorthand Property */
  /* border: 5px solid #000; */
}

.hollow-square {
  position: relative;
  width: 4rem;
  height: 4rem;
  display: inline-block;
  background-color: black;
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: white;
}

<!-- HTML Code -->

<div class="hollow-circle">
</div>

<br/><br/><br/>

<div class="hollow-square">
  <div class="inner-circle"></div>
</div>

- Souleh Shaikh