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

更多这里

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特殊字符

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>