如何仅使用 CSS 创建一个圆形或方形 - 中心是空心的？

Question

它应该基本上是正方形或圆形的轮廓 - 我可以相应地设置样式（即将颜色更改为我想要的任何颜色，更改边框的粗细等）

我想将那个圆形或正方形应用到其他东西（如图像或其他东西）上，中间部分应该被挖空，这样你就可以看到正方形或圆形下方的图像。

我希望它主要是 CSS + HTML。

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

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 Special Characters

Answer 3

我不知道一个简单的仅适用于圆形的 css（2.1 标准）解决方案，但对于正方形，您可以轻松完成：

.squared {
    border: 2px solid black;
}

然后，使用以下 html 代码：

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

Answer 4

如果你想让你的 div 保持圆形，即使你改变了它的宽度/高度（例如使用 js），请将半径设置为 50%。例子： css：

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

html:

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

Answer 5

循环时间！ :) 制作一个空心圆的简单方法：使用边框半径，给元素一个边框，没有背景，这样你就可以看穿它：

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>

Answer 6

据我所知，没有跨浏览器兼容的方式仅使用 CSS 和 HTML 制作圆圈。

对于正方形，我想你可以制作一个带有边框和 z-index 的 div，它比你放置的要高。我不明白为什么你需要这样做，当你可以在图像或“某物”本身上加一个边框时。

如果其他人知道如何制作一个跨浏览器仅兼容 CSS 和 HTML 的圆圈，我很想听听！

@Caspar Kleijne border-radius 在 IE8 或更低版本中不起作用，不确定 9。

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>

上面的链接中还有很多其他的形状示例，但是您必须测试浏览器的兼容性。

Answer 8

如果是圆形，你只需要一个 div，但如果是空心方形，你需要 2 个 div。 div 具有 inline-block 的显示，您可以相应地进行更改。直播 Codepen 链接：Click Me

如果是圆形，您只需要更改 border 属性和 dimensions（宽度和高度）的圆。如果要更改颜色，只需更改 hollow-circle 的边框颜色即可。

如果是方形 background-color 属性需要根据页面背景或要放置 空心方形。始终保持 inner-circle 尺寸小于 hollow-square。如果你想改变颜色，只需改变 hollow-square 的背景颜色。 inner-circle 以 hollow-square 为中心，使用 位置，顶部，左，变换属性只是不要弄乱它们。

代码如下：

/* 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>