Question

   .icon {
        padding: 5px 10px;
        display: inline-block;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        -moz-box-shadow: 0px 0px 2px #888;
        -webkit-box-shadow: 0px 0px 2px #888;
        box-shadow: 0px 0px 2px #888;
    }

    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">
    <div class="icon">
    <i class="fa fa-fw fa-facebook"></i>
        </div>
    <div class="icon">
    <i class="fa fa-fw fa-google-plus"></i>
        </div>
    <div class="icon">
    <i class="fa fa-fw fa-twitter"></i>
    </div>
        <div class="icon">
    <i class="fa fa-fw fa-linkedin"></i>
        </div>

我希望我的社交图标有圆形边框。我希望我的社交图标的边框与此网站完全相同：http://www.krishinternationalinc.com（如果您一直向下滚动到底部，则可以看到社交图标）。我已经尝试使用边框半径，但在100px之后它不会改变任何东西。另外我如何使图标彼此间隔？如果链接不起作用，请转到谷歌并输入krishinternationalinc.com并单击第一个链接。

Answer 1

忽略一分钟“i”是CSS类的一个非常可怕的名称，让我不确定你的CSS的类声明中是否有拼写错误，这应该可以解决你的问题：

.icon {
    padding: 5px 5px 5px 5px;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    display: inline-block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

简而言之：填充必须在所有边上相等，因此轮廓的纵横比不会拉伸（圆圈的宽高比始终为1：1）。我还添加了固定的宽度和高度来计算不同大小的徽标。

Answer 2

你有不均匀的填充。如果你想要一个完整的圆，你需要与高度相同的宽度，或者在你的代码中，需要相同的填充。

提示：使用border-radius：50％;得到任意大小的盒子的圆圈。

.i{
 padding: 20px;
 border-radius: 50%;
 border: 1px solid #FFF; /* White */
}

如何围绕我的社交图标制作圆形边框？

2 个答案: