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

Question

通过JavaScript或jQuery方法，当我尝试使用斜杠来修改具有2个值的CSS border-radius 时，结果中没有斜杠。

例子：

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

or :

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

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

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

有什么解决方法吗？

谢谢所有答案。

我的问题不是实时效果，它确实可以工作，但在页面中编写的结果（用于保存页面）因为块div内部的CSS编写错误：像"<div id="mydiv" style="border-radius: 20% 15%;">，然后当文件再次被读取时，结果不像使用border-radius: 20% / 15%;。

- Christophe Martin

---

这句话的意思是“'20% / 15%'怎么样？”，其中“/”符号表示分数线。 - Ismael Miguel

这个方法（'20% / 15%'）不起作用。 - Christophe Martin

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>

- Philip Dernovoy

---

这是唯一正确的解决方案。我创建了另一个示例来演示。无论您是否使用斜杠，开发工具都会返回没有斜杠的值 - 即使它呈现正确。请注意，当将属性切换关闭并再次打开时，它将呈现为没有斜杠的值！ - Bram Vanroy

是的，在实时环境中它可以工作，但我需要保存结果，而且结果的 CSS 写法是错误的。 - Christophe Martin

@ChristopheMartin 你是怎么尝试保存它的？$('#mydiv').css('border-radius')返回正确的结果 - 把它保存下来。 - Philip Dernovoy

Answer 2

你尝试过反斜杠转义吗？

20% **\**/ 15%'})

(remove **)

- 3pic

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%）：

- Jon Surrell

---

我已经测试过了，似乎正常工作，尽管开发工具的输出不一致（如另一个答案中所提到的）。我将更新我的答案... - Jon Surrell

@ChristopheMartin，请看一下这个更新，看看你是否遇到了相同的问题。可能是Chrome的一个bug。 - Jon Surrell

是的，在实时环境中它可以工作，但我需要将结果保存在文件中，而且由jQuery或JavaScript编写的结果CSS是错误的，当每个角落的值相同时，它会在文件中进行简化。 - Christophe Martin

是的，非常感谢您的一切。 - Christophe Martin

虽然在屏幕上看起来没问题，但是使用JavaScript/jQuery方法写入的结果是错误的：style="border-radius: 20% 15%;" 因此，无法保存HTML页面结果。 - Christophe Martin