使用javascript设置动画时div内边界半径不起作用_Javascript_Html_Css

使用javascript设置动画时div内边界半径不起作用

javascript html css

使用javascript设置动画时div内边界半径不起作用,javascript,html,css,Javascript,Html,Css,当我通过java脚本动态更改边框宽度时，我的div内边框不起作用，但当我不使用js时，它起作用。我正在为div设置动画，以增加和减少div边框宽度。但在动画期间增加div大小时，内边框半径不会出现。提前谢谢` <html> <head> <style type="text/css"> .animation{ margin:0 auto; padding:10px; width:300px; height:300px; text-align:center; v

当我通过java脚本动态更改边框宽度时，我的div内边框不起作用，但当我不使用js时，它起作用。我正在为div设置动画，以增加和减少div边框宽度。但在动画期间增加div大小时，内边框半径不会出现。提前谢谢`

<html>
<head>
<style type="text/css">
.animation{
margin:0 auto;
padding:10px;
width:300px;
height:300px;
text-align:center;
vertical-align:center;
}
.radius-all { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }
.template-bg { background: #FFF; }
.template-border { border: 10px solid rgba(100,100,100, 0.5); }
</style>
<script type="text/javascript">
var i=40;var flag=1;
function animate(){

  setTimeout(function () {    
     document.getElementById('animation').style.border = "#CCC "+i+"px"+ " solid";/*problem here*/ 
     document.getElementById('animation').style.width =(320-i)+'px';
     document.getElementById('animation').style.height = (320-i)+'px';
      if(flag)
      i++;
      else
      i--;
      if (i <40) {
          if(i<0){
          flag=1;
          }
        animate(); 
      }else{
      i=40;
      flag=0;
      animate();
      }           
   }, 40)
}

</script>
</head>
<body onload="animate()">
<div class="animation body template-bg template-border radius-all" id="animation">
This is a div
</div>
</body>
</html>`


.动画{
保证金：0自动；
填充：10px；
宽度：300px；
高度：300px；
文本对齐：居中；
垂直对齐：居中；
}
.radius所有{边界半径：20px；-moz边界半径：20px；-webkit边界半径：20px；}
.template bg{background:#FFF；}
.模板边框{边框：10px实心rgba（100100，0.5）；}
var i=40；var标志=1；
函数animate（）{
setTimeout（函数（）{
document.getElementById（'animation'）.style.border=“#CCC”+i+“px”+“solid”；/*此处有问题*/
document.getElementById（'animation'）.style.width=（320-i）+'px'；
document.getElementById（'animation'）.style.height=（320-i）+'px'；
国际单项体育联合会（旗）
i++；
其他的
我--；
如果（i您可以使用jQuery，并且工作非常简单
这项工作的简单代码
function animate(){
     var bw;
     if($("#animation").css("border-radius")=="40px"){
          bw=0;
     }else{
          bw=40
     }
     $("#animation").animate({"border-radius":bw,"width":320-bw,"height":320-bw},200,function(){
           animate();
     });
}

并为动画标记使用样式属性
#animation{
    border:20px solid #ccc;
    margin:0 auto;
    padding:10px;
    width:300px;
    height:300px;
    text-align:center;
    vertical-align:center
}

动画没有什么问题。边界宽度只是变得比外半径大，因此内半径将为零。如果你想要到40，则显示内半径，并且只有当边界宽度为40时，内半径才为零。我如何修复它？请确定。谢谢。解决了将边界半径增加到40的问题。反对票怎么了？请回答不要投反对票，但是…问题没有明确的问题陈述，只有你说“它不起作用”。你应该描述你期望你的代码做什么，以及它做什么。你的建议行得通，但我想要div的内边界半径。你可以用边界半径替换边界宽度