border-radius在两个值之间使用斜杠（“/”）

Question

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

示例：

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

或：

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

结果是：border-radius: 20% 15%;（值之间没有斜线）

但是我需要这个斜杠“/”来定义角落的不同角度

任何解决方案？

感谢所有回复。

我的问题不是现场的效果，是的，它是有效的，但是页面中的写入结果（用于保存页面）因为在bloc div中写入的css是错误的：例如“<div id="mydiv" style="border-radius: 20% 15%;"> 然后，当再次读取文件时，结果与border-radius: 20% / 15%;不一样。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你有没有试过反对它？

root@atd-ciso:/# tail -f nohup.out
Waiting for database server to accept connections...........................................................

（删除**）

Answer 3

一个简单的解决方案是指定所有值而不使用速记，例如（MDN）：

border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

扩展，你可以这样做：

$( "#mydiv" ).css({
  'border-top-left-radius':     '20% 5%',
  'border-top-right-radius':    '20% 5%',
  'border-bottom-right-radius': '20% 5%',
  'border-bottom-left-radius':  '20% 5%',
})

// OR

var mydivstyle = document.getElementById("mydiv").style;
mydivstyle.borderTopLeftRadius = '20% 5%';
mydivstyle.borderTopRightRadius = '20% 5%';
mydivstyle.borderBottomLeftRadius = '20% 5%';
mydivstyle.borderBottomRightRadius = '20% 5%';

工作示例：

更新以显示正确的css属性（由OP请求）

$("#mydiv").css({
  'border-top-left-radius':     '20% 15%',
  'border-top-right-radius':    '20% 15%',
  'border-bottom-right-radius': '20% 15%',
  'border-bottom-left-radius':  '20% 15%',
});

$("#output").text(
  $("#mydiv").css('border-radius')
);

#mydiv { height: 40px; width: 100%; background: #00f; }
#output { font-family: monospace; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
<h2>Result: (<code>$("#mydiv").css('border-radius')</code>)</h2>
<div id="output"></div>

来自MDN

的详细信息

更新

Chrome开发工具似乎不一致地显示此属性。以下是一些屏幕：

使用style=border-radius: 10% 5%;：

使用style=border-radius: 10% / 5%;：

运行jQuery代码段后（读取10% 5%但角落属性展开为10% / 5%）：