边框半径消失后一秒

Question

我正在一个网站上，我试图让个人资料图片有一个边框半径，因此它是圆的。这在一开始就起作用，但是在1秒之后它会回到正方形。

配置文件图片在盘旋时也会翻转。

任何解决方案？

.border 
 
{ 
 
\t -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    border-radius: 100px; 
 
} 
 

 
.roundedImage { 
 
\t overflow:hidden; 
 
\t position:relative; 
 
\t -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    border-radius: 100px; 
 
\t width: 200px; 
 
\t height:200px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
    -webkit-animation:pop-in 0.8s; 
 
    -moz-animation:pop-in 0.8s; 
 
    -ms-animation:pop-in 0.8s; 
 

 
} 
 

 
.flip-container { 
 
\t perspective: 1000; 
 
\t z-index:3; 
 
} 
 
\t 
 
\t .flip-container:hover .flipper, .flip-container.hover .flipper { 
 
\t \t transform: rotateY(180deg); 
 
\t } 
 

 
.flip-container, .front, .back { 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t margin-left:auto; 
 
\t margin-right:auto; 
 
\t 
 
} 
 

 

 
.flipper { 
 
\t transition: 0.6s; 
 
\t transform-style: preserve-3d; 
 
\t 
 
} 
 

 

 
.front, .back { 
 
\t backface-visibility: hidden; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 

 

 
.front { 
 
\t transform: rotateY(0deg); 
 
} 
 

 

 
.back { 
 
\t transform: rotateY(180deg); 
 
\t }

<div class="border"> 
 

 
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 

 
<div class="roundedImage"> 
 

 
<div class="flipper"> 
 

 
<div class="front"> 
 
<div style="background: url(Images/L2351108.jpg); height:200px; background-size: cover;"></div> 
 
</div> 
 

 
<div class="back"> 
 
<div style="background:url(Images/L2351070.jpg); height:200px; background-size:cover;"</div> 
 
</div> 
 

 
</div> 
 
</div> 
 
</div> 
 
</div>

Answer 1

到处卸下border属性在你postet CSS（你不需要他们），并添加

.front div, .back div { 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
    border-radius: 100px; 
} 

到你的CSS。这对我行得通。

JSFiddle