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

问题描述

它应该基本上是一个方形或圆形的轮廓 – 我可以相应地设计风格 (即将颜色改为任何我想要的，改变边框的厚度等)

我想把这个圆圈或正方形应用于别的东西 (如图像或东西)，中间部分应该被挖空，所以你可以看到正方形或圆形下的图像。

我更喜欢它主要是 CSS + HTML 。

最佳解决方案

尝试这个



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

次佳解决方案

您可以使用特殊字符来制作大量的形状。示例：http://jsfiddle.net/martlark/jWh2N/2/



<table>
  <tr>
    <td>hollow square</td>
    <td>□</td>
  </tr>
  <tr>
    <td>solid circle</td>
    <td>&bull;</td>
  </tr>
  <tr>
    <td>open circle</td>
    <td>๐</td>
  </tr>

</table>

还有更多的可以在这里找到：HTML Special Characters

第三种解决方案

我不知道一个简单的 css(2.1 标准) – 圆圈的解决方案，但是对于方格，你可以轻松做到：

.squared {
    border: 2x solid black;
}

然后，使用以下 html 代码：

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

第四种方案

如果您希望您的 div 保持圆形，即使您更改其宽度/高度 (例如使用 js)，将半径设置为 50％。示例：css：

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

HTML：

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

第五种方案

圈时间！ :) 使用一个空心中心做一个圆圈的简单方法：使用 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>

第六种方案

据我所知，没有 cross-browser 兼容的方式，使 CSS& 仅 HTML 。

对于广场我猜你可以做一个边框边框和一个 z-index 高于你把它的结果。我不明白为什么你需要这样做，当你可以把图像边框或”something” 本身。

如果有其他人知道如何制作一个跨浏览器与 CSS& 只有 HTML，我很乐意听到它！

@Caspar Kleijne border-radius 在 IE8 或以下不工作，不确定 9 。

参考文献

How do I create a circle or square with just CSS – with a hollow center?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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