如何创建一个圆或方只CSS - 具有中空中心？

https://stackoverflow.com/questions/3815732

26-09-2019
|

题

它应该只是基本上是方形或圆形的轮廓 - 我可以相应样式（即改变颜色为任何我想要，改变边界的厚度，等等）

我想申请的是圆形或方形过别的东西（如图像或东西）和中间部分应该被掏空了，所以你可以看到方形或圆形下方的图像。

我宁愿为它是主要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>

更多这里

其他提示

您可以使用特殊字符，使大量的形状。例子： 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特殊字符

我不知道一个简单的CSS（2.1标准）为界-only溶液，但对于方块可以很容易地做到：

.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>

圈时间！ :)制作圈具有中空中心的简单的方法：使用边界半径，使元素边框和没有背景，所以你可以透过它看到：

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>

据我所知是让只有CSS和HTML的圈子跨浏览器兼容的方式。

有关方我想你可以做一个边框和z-index的一个div比你把它在什么更高。我不明白为什么你需要做到这一点，当你可以只是把边框的图像或“东西”本身。

如果任何人知道如何使一个圆圈是用CSS和HTML只跨浏览器兼容的，我很想听到它！

@Caspar Kleijne边界半径不工作在IE8或以下，不知道9。

不久发现这个问题后，我发现这些例子对CSS技巧：的http：// CSS-技巧的.com /示例/ 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>

有在上述链接许多其它形状的例子，但你将不得不测试浏览器兼容性。