0 
   .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>

ソーシャル アイコンの境界線を丸くしたい。ソーシャル アイコンの境界線をこの Web サイトとまったく同じにしたいと考えています: http://www.krishinternationalinc.com (一番下までスクロールすると、ソーシャル アイコンが表示されます)。すでに境界線の半径を使用してみましたが、100px 以降は何も変わりません。また、アイコンを互いに離すにはどうすればよいですか? リンクが機能しない場合は、Google にアクセスして krishinternationalinc.com と入力し、最初のリンクをクリックしてください。

4

2 に答える 2

2

「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 です)。また、さまざまなサイズのロゴを考慮して、幅と高さを固定しました。

于 2014-11-28T22:45:57.870 に答える
0

パディングが不均一です。完全な円が必要な場合は、高さと同じ幅、またはコードで同じパディングが必要です。

ヒント: border-radius: 50% を使用してください。任意のサイズのボックスの円を取得します。

.i{
 padding: 20px;
 border-radius: 50%;
 border: 1px solid #FFF; /* White */
}
于 2014-11-28T22:46:41.630 に答える