如何使用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: 2x 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

圈子时间！ :)制作带有空心的圆的简单方法：使用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>

Answer 6

据我所知，没有跨浏览器兼容的方式来制作CSS＆amp;仅限HTML。

对于广场，我猜你可以创建一个带边框的div和一个高于你所用的z-index。我不明白为什么你需要这样做，当你可以在图像上放置边框或“东西”本身。

如果有其他人知道如何制作一个与CSS兼容的跨浏览器的圈子＆amp;仅限HTML，我很乐意听到它！

@Caspar Kleijne border-radius在IE8或以下版本不起作用，不确定是否为9。

Answer 7

在发现这些问题后不久，我在CSS技巧上找到了这些例子：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 属性和 尺寸 （宽度和高度）。如果要更改颜色，只需更改 空心圆 的边框颜色即可。

如果是方形 background-color 属性，则需要根据页面背景或要放置 < em>空心正方形 。与空心正方形相比，请始终使 内圆 尺寸较小。如果要更改颜色，只需更改 空心正方形 的背景颜色。 内圆 以 空心正方形 为中心，使用 位置，顶部，左侧，变换属性 ，只是不要弄乱它们。

代码如下：

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