Question

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

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

要更改每个角落的 border-radius ，我用四个数字输入写了这个表单：

<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 之前）缺少+ 控制台应该告诉你。

使用Javascript设置border-radius（每个角落）

1 个答案: