如何设置border-radius来制作带圆圈的字母？

Question

我尝试在我的网站中插入边界半径。它应该看起来像：

我使用Font Awesome和Bootstrap（在小提琴我不能插入它）。这就是我尝试这样做的方式：http://jsfiddle.net/24oehpeh/

这是代码：

＆＃13;

＆＃13;

 .ikonka:hover{   
    border: 2px solid;
    border-radius:100%;
}

＆＃13;

<div class="ikonka">f</div>

＆＃13;

＆＃13;

＆＃13;

我做错了什么？

Answer 1

我选择使用伪元素＆＃34;之前＆＃34;对于这个解决方案。

它为您提供了诸如＆＃34;第二个元素＆＃34;之类的好处，您可以更自由地设置它的样式，而不会使用主要元素进行许多技巧。

^{已更新，现在有一个完美的圆圈...：）}

＆＃13;

＆＃13;

.ikonka {
    position: relative;
    border: 2px solid transparent;
    display: inline-block;
    /*padding: 4px 10px;   removed */
    background-color: black;
    color: white;    
    width: 24px;          /* added */
    height: 24px;         /* added */
    line-height: 24px;    /* added */
    text-align: center;   /* added */
}
.ikonka:hover:before {
    border: 2px solid white;
    border-radius:100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

＆＃13;

<div class="ikonka">f</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要在元素上设置宽度。就目前而言，内容f包含在div中，div是块级元素。这将占用最大可用水平空间。

＆＃13;

＆＃13;

 .ikonka {
    border: #fff 2px solid;
    border-radius: 50%;
    height: 20px;
    text-align: center;
    width: 20px;
}

 .ikonka:hover {
    border-color: #000;
}

＆＃13;

<div class="ikonka">f</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

• div不得设置为自动宽度（100％）。
• 边框应该是透明的，因此有两个不可见边框的像素。
• 边界半径为50％就足够了，因为它会使每边弯曲一半。
• 为了使它看起来像你的例子，一些字体样式是必要的。
• 结果：

＆＃13;

＆＃13;

body{ background-color:#2C2F34; }

.ikonka{
    width:32px;
    height:32px;
    border: 2px solid transparent;
    border-radius:50%;
    color:white;
    cursor:default;
    text-align:center;
    font-weight:bold;
    font-size:26px;
    font-family:sans-serif;
}

.ikonka:hover{ border-color:white; }

＆＃13;

<div class="ikonka">f</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个。

.ikonka:hover{   
    border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}

.ikonka {
        width: 100px;
height: 72px;
text-align: center;
background-color: black;

font-size: 51px;

color: white;
vertical-align: middle;

position: relative;

display: inline-block;
padding: 16px 8px;
}

<div class="ikonka">f</div>