使用Javascript设置border-radius(每个角落)

Question

我有一个像这样的CSS风格的div:

div#xy {
  height:180px; 
  width:180px;
  border: 6px solid black;
  border-radius: 0px 0px 0px 0px;
}

要改变边界半径的每一个角落,我写了这个形式有四个数字输入:

<form>
:<input type="number" name="ctl" min="0" max="180"step="5" value="0" onChange="cornerTl()" onClick="cornerTl()" />
:<input type="number" name="ctr" min="0" max="180"step="5" value="0" onChange="cornerTr()" onClick="cornerTr()" />
:<input type="number" name="cbr" min="0" max="180"step="5" value="0" onChange="cornerBr()" onClick="cornerBr()" />
:<input type="number" name="cbl" min="0" max="180"step="5" value="0" onChange="cornerBl()" onClick="cornerBl()" />
</form>

而这个功能:

function cornerTl(){
 var topLeft = document.forms[0].elements[0].value
 var topRight = document.forms[0].elements[1].value
 var botLeft = document.forms[0].elements[2].value
 var botRight = document.forms[0].elements[3].value
 document.getElementById("xy").style.WebkitBorderRadius = topLeft + "px " + topRight + "px " botLeft + "px " + botRight + "px"; 
}

该脚本不起作用,但我可以只用一个值一次更改所有四个角:

document.getElementById("xy").style.WebkitBorderRadius = topLeft + "px "

我看到它的方式,我的第一个功能应该工作 - 为什么不呢？

Answer 1

函数的最后一行中有一个+缺失(之前botLeft)
控制台应该告诉你.