Question

使用CSS，单独的边框半径设置如下：

border-top-left-radius: 10px;   
border-top-right-radius: 10px;   
border-bottom-left-radius: 10px;   
border-bottom-right-radius: 10px;

但是我如何使用Javascript设置这些单独的边界半径？

Answer 1

<div id="target">Lorem Ipsum</div>

<script type="text/javascript">
    var target = document.getElementById("target");
    target.style.borderTopLeftRadius = "20px";
</script>

<强> Live Example

Answer 2

element.style['border-top-left-radius'] = '4px';
element.style['border-top-right-radius'] = '4px';
element.style['border-bottom-left-radius'] = '4px';
element.style['border-bottom-left-radius'] = '4px';

甚至更小：

element.style['border-radius'] = '4px';

您也可以使用：

element.style.borderTopLeftRadius = '4px';
element.style.borderTopRightRadius = '4px';
element.style.borderBottomLeftRadius = '4px';
element.style.borderBottomRightRadius = '4px';

但请记住，它还不是一个网络标准，所以每个浏览器都有它自己的声明：

element.style['border-radius']//Future standard
element.style['-webkit-border-radius']//Webkit(Safari and Chrome)
element.style['-moz-border-radius']//Mozilla Firefox
element.style['-o-border-radius']//Opera

Answer 3

如果可能的话，最好是指定每个角落的四舍五入的CSS类，然后使用简单的JS在类之间交换。这样，如果浏览器需要-webkit-border-radius或border-radius或IE，则可以更轻松地指定回退。

边界半径使用Javascript

3 个答案: