javascript - border-radius 在两个值之间使用斜杠 ("/")

Question

通过 javascript 或 jquery 方法，当我尝试修改 css border-radius有 2 个值，在结果之间使用斜杠是没有斜杠的。

示例:

document.getElementById("mydiv").style.borderRadius ="20% / 15%"; 

或:

$( "#mydiv" ).css({'border-radius':'20% / 15%'})

结果是:border-radius: 20% 15%; (值之间没有斜杠)

但是我需要这个斜线“/”来定义不同的 Angular

有什么解决办法吗？

感谢所有回答。

我的问题不是 live 中的效果，是的，它是有效的，但是页面中的写入结果(用于保存页面)因为 bloc div 中写入的 css 是错误的:像“<div id="mydiv" style="border-radius: 20% 15%;">”然后当再次读取文件时，结果与 border-radius: 20% / 15%; 不同。 .

Answer 1

您的代码至少在 Chrome 中按预期工作。但是 Chrome DevTools 显示这个属性是错误的。

$('#s').on('click', function() {
    $('#mydiv').css({'border-radius': '20% / 5%'});
});
$('#d').on('click', function() {
    alert($('#mydiv').css('border-radius'));
});

div {
    width: 100px;
    height: 100px;
    background: #000;
}
button {
    display: block;
    margin: 10px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="mydiv"></div>
<button id="d">get border-radius</button>
<button id="s">set border-radius</button>