49

它应该基本上是正方形或圆形的轮廓 - 我可以相应地设置样式（即，将颜色更改为我想要的任何颜色，更改边框的粗细等）

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

我希望它主要是 CSS + HTML。

4

8 回答 8

60

试试这个

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>

更多在这里

于 2010-09-28T18:12:23.333 回答
18

您可以使用特殊字符来制作许多形状。示例：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 特殊字符

于 2013-12-06T03:58:58.497 回答
8

我不知道一个简单的 css(2.1 标准)-only 圆形解决方案，但对于正方形，你可以轻松做到：

.squared {
    border: 2px solid black;
}

然后，使用以下 html 代码：

<img src="…&quot; alt="an image " class="squared" />
于 2010-09-28T18:11:00.510 回答
7

如果你希望你的 div 保持它的圆形形状，即使你改变它的宽度/高度（例如使用 js）将半径设置为 50%。示例：CSS：

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
}

html:

<div class="circle"></div>
于 2011-11-26T10:15:58.857 回答
7

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

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>

于 2013-08-08T14:04:02.120 回答
3

据我所知，没有跨浏览器兼容的方式仅使用 CSS 和 HTML 制作圆圈。

对于正方形，我想您可以制作一个带有边框和 z-index 的 div，它比您放置的要高。我不明白为什么你需要这样做，当你可以在图像或“某物”本身上加一个边框时。

如果其他人知道如何制作一个仅与 CSS 和 HTML 兼容的跨浏览器的圆圈，我很想听听！

@Caspar Kleijne 边界半径在 IE8 或更低版本中不起作用，不确定 9。

于 2010-09-28T18:15:17.807 回答
0

找到这个问题后不久，我在 CSS Tricks 上找到了这些示例：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>

上面的链接中还有许多其他形状示例，但您必须测试浏览器的兼容性。

于 2014-07-09T12:51:18.693 回答
0

在圆形的情况下，您只需要一个 div，但在空心方形的情况下，您需要 2 个 div。div 显示了inline-block，您可以相应地进行更改。Live Codepen 链接：点我

在圆形的情况下，您需要更改的只是边框属性和圆形的尺寸（宽度和高度）。如果你想改变颜色，只需改变hollow-circle的边框颜色。

如果需要根据页面背景或要放置空心正方形的元素更改方形背景颜色属性。与空心正方形相比，始终保持内圆尺寸较小。如果你想改变颜色，只需改变hollow-square的背景颜色。内圆以空心正方形为中心，使用位置、顶部、左侧，变换属性只是不要弄乱它们。

代码如下：

/* CSS Code */

.hollow-circle {
  width: 4rem;
  height: 4rem;
  background-color: transparent;
  border-radius: 50%;
  display: inline-block;
  
  /* Use this */
  border-color: black;
  border-width: 5px;
  border-style: solid;
  /* or */
  /* Shorthand Property */
  /* border: 5px solid #000; */
}

.hollow-square {
  position: relative;
  width: 4rem;
  height: 4rem;
  display: inline-block;
  background-color: black;
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: white;
}
<!-- HTML Code -->

<div class="hollow-circle">
</div>

<br/><br/><br/>

<div class="hollow-square">
  <div class="inner-circle"></div>
</div>

于 2019-12-18T14:44:36.280 回答