Question

以下是代码：

HTML：

<div class="connectContainer">
    <div class="outerCircle">
        <div class="innerCircle">
            <div class="imgDiv">
                <img class="connectLink" src="car.png">
            </div>
        </div>
    </div>
</div>

CSS：

.connectContainer {
    position:relative;
    height:200px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
    margin-top:30px;
}

.imgDiv {
    width:150px;
    height:150px;
    position:absolute;
}

.connectLink {
    position:absolute;
    height:67px;
    width:110px;
    top:41px;
    left:20px;
}

.innerCircle {
    position:absolute;
    border:2px solid #43cee6; 
    width:150px; 
    height:150px; 
    border-radius:100%;
    left:20px;
    top:20px;
    -webkit-animation-name: changeInnerBorderColor;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;

}

.outerCircle {
    position:absolute;
    border:2px solid #43cee6; 
    width:190px; 
    height:190px; 
    border-radius:100%;
    margin:0 auto;
    -webkit-animation-name:changeOuterBorderColor;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count: infinite;
}

我使用的是谷歌浏览器版本47.0.2526.73（64位）。所有动画和其他属性都工作得很好。我尝试改变边框宽度，它也会改变。

只有border-radius不起作用。我得到的是方块而不是圆圈。

此外，移动应用程序的此代码的离子版本为我提供了圈子！

请帮忙。

Answer 1

要制作任何圆圈，您必须更改边框半径属性50％，然后它将作为圆圈。

您的.innerCircle和.outerCircle类存在100％的边框半径值，将其更改为50％以获得圆圈。

.innerCircle {
position:absolute;
border:2px solid #43cee6; 
width:150px; 
height:150px; 
border-radius:50%;
left:20px;
top:20px;
-webkit-animation-name: changeInnerBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;

}

.outerCircle {
position:absolute;
border:2px solid #43cee6; 
width:190px; 
height:190px; 
border-radius:50%;
margin:0 auto;
-webkit-animation-name:changeOuterBorderColor;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: infinite;
}

Answer 2

在您的代码中尝试此操作以获得正确的输出。你可以根据你的要求改变顶部，左边，宽度，高度。

.connectContainer {
    position: relative;
    height: 200px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
.outerCircle {
   position: absolute;
    border: 2px solid #43cee6;
    width: 190px;
    height: 190px;
    border-radius: 100%;
    margin: 0 auto;
    -webkit-animation-name: changeOuterBorderColor;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
.innerCircle {
    position: absolute;
    border: 2px solid #43cee6;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    left: 20px;
    top: 20px;
    -webkit-animation-name: changeInnerBorderColor;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
.imgDiv {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10px;
}
.connectLink {
    position: absolute;
    height: 110px;
    width: 110px;
    top: 20px;
    left: 20px;
    border-radius: 100%;
}

Answer 3

这是你的小提琴http://jsfiddle.net/7xewv0f5

我看到它正常工作。尝试检查元素以查找覆盖border-radius

的其他css

<div class="connectContainer">
    <div class="outerCircle">
        <div class="innerCircle">
            <div class="imgDiv">
                <img class="connectLink" src="car.png">
            </div>
        </div>
    </div>
</div>

Border-radius属性不起作用

3 个答案: