如何用CSS创build一个圆形或方形 – 具有空心的中心？

它应该基本上是方形或圆形的轮廓 – 我可以相应地进行devise（即，将颜色更改为任何我想要的，更改边框的厚度等）

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

我更喜欢它主要是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> 

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> 

Answer 3

我不知道一个简单的CSS（2.1标准） – 只是解决scheme的圈子，但广场，你可以轻松做到：

 .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

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

 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-qc-640-480-1.jpg'); background-size:cover; } 

 <div></div> 

Answer 6

据我所知，没有跨浏览器兼容的方式只能使用CSS和HTML做一个圆圈。

对于广场，我想你可以做一个边界和Z指数高于你正在把它的结果。 我不明白为什么你需要这样做，当你可以只在图像或“东西”本身的边界。

如果其他人知道如何创build一个跨浏览器与CSS和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>