在文本周围制作圆形边框

Question

现在我想要一个带圆圈的加号。

http://jsfiddle.net/dtracers/cvtztcy1/1/

<h1>TEXY TXT <span>+</span></h1>

<style>
span {
    border-radius: 50%;
    border-style:solid;
    border-width: 1px 3px 1px 1px;
    padding:0px;
    padding-bottom:0.125em;
    cursor:pointer;
    margin:0px;
}

/* Just to see if that would modify anything */
h1 {
    padding:0px;
    margin:0px;
}
</style>

看起来这不是一个圆而是一个椭圆，我意识到问题出在文本高度上，但有没有办法让它看起来更接近。

背景是动态的，所以我不能使用图片。而且我也不想要一个依赖绝对定位的浮动元素。

我也希望圆的高度等于当前的宽度。我知道我可以把它做得更宽，但我不想要一个巨大的圆，我想要一个紧凑的小圆。

编辑 对于那些说这是相同问题的人，其实还有区别。 我问的问题是要求圆比文本边界小。 因此，那里给出的解决方案都不适用于我的问题。

- dtracers

---

这对你有用吗？http://jsbin.com/faxubibazitu/1/edit - Kheema Pandey

Answer 1

您可以使用:after伪元素来实现此目的。查看演示。

span {
  position:relative;
  padding:0; margin:0;
  cursor: pointer;
}
span:after
{
content:"";
position:absolute;
display:inline-block;
left:-1px;
top:7px;
background:gold;
border-radius: 50%;
width:0.5em;
height:0.5em;
font-size:1.3em;
z-index:-1;
}

- Kheema Pandey

---

我基本上使用了稍作修改的版本。 - dtracers

Answer 2

在 CSS 中调整您的 padding 值，一切都会变得很好：

演示

span {
    border-radius: 50%;
    border-style:solid;
    border-width: 1px 3px 1px 1px;
    padding:0 2%; /* updated */
    /* padding-bottom:0.125em;  removed */
    cursor:pointer;
    margin:0px;
}

- NoobEditor

---

我想让它变得更矮一些，离加号更近。 - dtracers

然后进一步减少你的填充。 - Benjamin

Answer 3

这将导致一个完美的圆：

span {
    border-radius: 150px;
    border-style:solid;
    border-width: 1px;
    padding:1% 2%;
    cursor:pointer;
    margin:0px;
    width:200px;
    line-height:300px;
}

- Nikhil Khullar

Answer 4

一个解决方案是使用“em”使标签的width和height相等，这样它就可以自然地调整到字体大小。

h1 span {
   display: inline-block;
   width: 0.9em;
   height: 0.9em;
   line-height: 0.8em;
   text-align: center;
   color: teal;
   background-color: palegoldenrod;
   border: 0.18em solid;
   border-radius: 1000px;
   padding-left: 1px;
   cursor: pointer;
   }

然后使用 line-height 和 text-align 居中加号。

调整CSS：
http://jsfiddle.net/zx2c4drL

- Dem Pilafian

---

一个建议是您应该使用%而不是px来设置边框半径值。 - Kheema Pandey