CSS显示圆形标签

Question

我想在面板的右上角显示圆形标签。我使用Bootstrap3面板和标签来实现这一目标。显然这个标签不是图像。

然而，由于我在设计方面很差，所以我无法想到一个干净的方式。有人可以给我一个解决方案吗？提前谢谢。

更新 实际上我的问题与添加圆形的borners无关。我想把它放在正确的位置。我很抱歉让事情变得困惑。

Answer 1

您必须使用border-radius属性http://www.w3schools.com/cssref/css3_pr_border-radius.asp

＆＃13;

＆＃13;

.index {
    border-radius: 50%
    // ...
}

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/243kwbjf/1/

Answer 2

您可以使用border-radius属性。

对于圈子，请使用值border-radius: 50%;。

Answer 3

将border-radius:50%;应用于受尊重的元素。

.box {
  position: relative;
  display: inline-block;
  top: 20px;
  margin-right: 20px;
}
.index {
  background: none repeat scroll 0 0 #0063ff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  padding: 5px 15px;
  position: absolute;
  right: -10px;
  top: -10px;
}

<div class="box">
  <img src="http://placehold.it/150x150" alt="image" />
  <span class="index">1</span>
</div>
<div class="box">
  <img src="http://placehold.it/150x150" alt="image" />
  <span class="index">2</span>
</div>
<div class="box">
  <img src="http://placehold.it/150x150" alt="image" />
  <span class="index">3</span>
</div>