使用 CSS,单独的边框半径设置如下:
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
但是我将如何使用 Javascript 设置这些单独的边界半径?
使用 CSS,单独的边框半径设置如下:
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
但是我将如何使用 Javascript 设置这些单独的边界半径?
<div id="target">Lorem Ipsum</div>
<script type="text/javascript">
var target = document.getElementById("target");
target.style.borderTopLeftRadius = "20px";
</script>
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-right-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
如果可能的话,最好制作 CSS 类并指定每个角的圆角,然后使用简单的 JS 在类之间进行交换。这样,例如,如果浏览器需要或者是 IE,-webkit-border-radius
您可以更轻松地指定回退。border-radius