如何创建一个圆或方只CSS - 具有中空中心?
-
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>□</td>
</tr>
<tr>
<td>solid circle</td>
<td>•</td>
</tr>
<tr>
<td>open circle</td>
<td>๐</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>
有在上述链接许多其它形状的例子,但你将不得不测试浏览器兼容性。
不隶属于 StackOverflow