如何使用CSS创建一个圆形或正方形 - 一个中空的中心？ [英] How do I create a circle or square with just CSS - with a hollow center?

问题描述

它应该只是一个正方形或圆形的轮廓 - 我可以相应的样式（即更改颜色到任何我想要的，改变边框的厚度等）

It should just basically be an outline of the square or circle - that I can style accordingly (i.e. change the color to whatever I want, change the thickness of the border, etc.)

我想将此圆形或正方形应用于其他部分（如图像或某物），中间部分应该被挖空，以便您可以看到正方形或圆形下方的图像。

I would like to apply that circle or square over something else (like an image or something) and the middle part should be hollowed out, so you can see the image beneath the square or circle.

我希望主要是CSS + HTML。

I would prefer for it to be mainly 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>

更多此处

这篇关于如何使用CSS创建一个圆形或正方形 - 一个中空的中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！