如何仅使用 CSS 创建一个圆形或方形 - 中心是空心的？
Posted
技术标签:
【中文标题】如何仅使用 CSS 创建一个圆形或方形 - 中心是空心的？【英文标题】：How do I create a circle or square with just CSS - with a hollow center? 【发布时间】：2011-04-18 11:04:01 【问题描述】：它应该基本上是正方形或圆形的轮廓 - 我可以相应地设置样式（即将颜色更改为我想要的任何颜色，更改边框的粗细等）
我想将那个圆形或正方形应用到其他东西（如图像或其他东西）上，中间部分应该被挖空，这样你就可以看到正方形或圆形下方的图像。
我希望它主要是 CSS + html。
【问题讨论】：
【参考方案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
【讨论】：
【参考方案2】：您可以使用特殊字符来制作许多形状。例子： http://jsfiddle.net/martlark/jWh2N/2/
<table>
<tr>
<td>hollow square</td>
<td>□</td>
</tr>
<tr>
<td>solid circle</td>
<td>•</td>
</tr>
<tr>
<td>open circle</td>
<td>๐</td>
</tr>
</table>更多可以在这里找到：HTML Special Characters
【讨论】：
【参考方案3】：我不知道一个简单的仅适用于圆形的 css（2.1 标准）解决方案，但对于正方形，您可以轻松完成：
.squared
border: 2px solid black;
然后，使用以下 html 代码：
<img src="…" class="squared" />
【讨论】：
这很有趣...我只是不喜欢使用<img> 标签。我更喜欢像上面的解决方案一样使用常规的<div>。不过谢谢。顺便说一句，我从来没有投反对票。我赞成:)
@marcamillion：我只使用了图像标签，因为它真的不重要。 （引用：»我想将那个圆形或正方形应用到其他东西上（例如 图像 或其他东西）«） - 当然，您可以使用 div、段落或其他任何东西。只需应用课程并根据自己的喜好设置样式
@nick 因为 div 是为此（默认容器）制作的，而不是用于拉取图像的 img 标签。我知道不必使用它的用途，但我更愿意这样做:) @Knittl ....我想你误解了我在找什么。我不是在寻找方形边框。我想创建一个 50px X 50px 的正方形，这只是一个轮廓。就像 Caspar 在他的圆形示例中所做的那样 - 我只是将其修改为正方形。这就是我一直在寻找的。现在我要做的就是将 z-index 添加到它上面我希望它位于顶部的元素之上。就是这样:)
好的，你说“将正方形应用于……”，所以我不太清楚。很高兴您找到了解决问题的方法【参考方案4】：
如果你想让你的 div 保持圆形，即使你改变了它的宽度/高度（例如使用 js），请将半径设置为 50%。例子： css：
.circle
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
html:
<div class="circle"></div>
【讨论】：
【参考方案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>【讨论】：
【参考方案6】：据我所知，没有跨浏览器兼容的方式仅使用 CSS 和 HTML 制作圆圈。
对于正方形，我想你可以制作一个带有边框和 z-index 的 div，它比你放置的要高。我不明白为什么你需要这样做，当你可以在图像或“某物”本身上加一个边框时。
如果其他人知道如何制作一个跨浏览器仅兼容 CSS 和 HTML 的圆圈，我很想听听！
@Caspar Kleijne border-radius 在 IE8 或更低版本中不起作用，不确定 9。
【讨论】：
IE9 将支持它：***.com/questions/635851/… 我没想到它会，但我自己没有测试过，所以我不想肯定地说，令人惊讶的是 IE 终于决定支持每个人都希望他们支持的东西. :D OP 没有设置浏览器要求。 （也许是为了娱乐或公司内部网）？ OP 想要一个 html 和 CSS 的圆圈，所以他得到了他想要的 ;) 我正在尝试做“标记”功能，比如 facebook。您可以在其中标记图像的一部分或其他一些元素。这就是为什么有人可能想要这样做。此外，CSS2/3 边界半径实现对我来说已经足够了。 我建议不要在要“标记”的项目上使用额外的父 div，而是将具有所需 css 的 CSS 类添加到要“标记”的项目。【参考方案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>上面的链接中还有很多其他的形状示例，但是您必须测试浏览器的兼容性。
【讨论】：
【参考方案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>【讨论】：
以上是关于如何仅使用 CSS 创建一个圆形或方形 - 中心是空心的？的主要内容，如果未能解决你的问题，请参考以下文章