Question

为什么圆圈不圆？

HTML：

<div class="container">
<div class="row">
    <div class="col-sm-6 col-md-3">
        <div class="service-box">
            <h3>MotorCycle Repair</h3>
            <i class="fa service-icon fa-wrench"></i>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a class="btn btn-default" href="#">View Details &raquo;</a></p>
        </div>
    </div>
</div>

CSS：

.service-box {
    cursor: pointer;
    margin: 0 0 0px 0;
    text-align: center;
    padding: 20px 10px;
    border: 1px solid #f0f0f0;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.service-box:hover {
    background-color: #3fb1fc;
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.3);
    background: #FFD600;
    color: #fff;
    border: 1px solid transparent;
}

.service-box:hover a {
    color: #fff;
}

.service-box a {
    color: #0286F4;
}

.service-box:hover .service-icon {
    border-color: #3fb1fc;
    color: #3fb1fc;
    border: 4px solid #ffd600;
    box-shadow: 0px 0px 0px 3px #fff !important;
    background: #fff !important;
    color: #ffd600;
}

.service-box .service-icon {
    width: 80px;
    height: auto;
    font-size: 70px;
    margin: 15px auto;
    padding: 25px 20px;
    text-align: center;
    display: block;
    text-align: center;
    border-radius: 50%;
    background: #ffd600;
    color: #fff;
    border: 4px solid #fff;
    box-shadow: 0px 0px 0px 3px #ffd600;
    box-shadow: 0px 0px 0px 3px #3fb1fc;
    background-color: #3fb1fc;
}

JS小提琴：

http://jsfiddle.net/E3jZ8/

Answer 1

更改service-icon课程。宽度必须为120px，因为您填充了20px。旧宽度为80px，因此80-20-20（左右填充）= 40px

宽度为40px，高度为80px，边界半径为50％，为椭圆;

右.service-icon：

.service-box .service-icon {
    width: 120px;
    height: auto;
    font-size: 70px;
    margin: 15px auto;
    padding: 25px 20px;
    text-align: center;
    display: block;
    text-align: center;
    border-radius: 50%;
    background: #ffd600;
    color: #fff;
    border: 4px solid #fff;
    box-shadow: 0px 0px 0px 3px #ffd600;
    box-shadow: 0px 0px 0px 3px #3fb1fc;
    background-color: #3fb1fc;
}

Answer 2

进行此更改：

.service-box .service-icon {
    width: 130px;
    height: 130px;
}

更新了JS Fiddle：

http://jsfiddle.net/E3jZ8/1/

为什么圆圈不是圆形的自举和fontawesome？

2 个答案: