我们如何直接设置border-radius选定方向的水平值分量？

Question

MDC：

  

border-radius每个方向有2个值，一个是水平值   值和1是垂直值。

如何设置所选方向的水平值（让我们假设所选方向为border-top-left-radius）而不影响垂直值，反之亦然？

要清楚，假设这是开始状态：

border-top-left-radius:     1em 2em;
border-top-right-radius:    3em 4em;
border-bottom-right-radius: 5em 6em;
border-bottom-left-radius:  7em 8em;

我如何进入最终状态：

border-top-left-radius:     100em 2em;
border-top-right-radius:    3em 4em;
border-bottom-right-radius: 5em 6em;
border-bottom-left-radius:  7em 8em;

我不能简单地style.borderTopLeftRadius="100em 2em";，因为我事先并不知道垂直分量是2em。

我想到的一种方法是使用style.borderTopLeftRadius读取当前的border-top-left-radius并进行一些字符串解析以确定是否设置了垂直值，如果是，则提取该值。

当然，我正在寻找比尝试分析字符串更好的解决方案。基本上我正在寻找类似的东西：style.borderTopLeftRadiusHorizontal="100em";

Answer 1

你刚才回答了自己的问题吗？要设置100em的边框半径，请将值设置为100em。我对你要问的问题感到困惑。

border-top-left-radius:     1em 2em;
border-top-right-radius:    3em 4em;
border-bottom-right-radius: 5em 6em;
border-bottom-left-radius:  7em 8em;

在此代码块中，两个值分别对应于水平和垂直半径。在此示例中，左上角的水平半径为1em，垂直半径为2em。更改任一值都不会影响其他值。

border-top-left-radius:     10em 2em;

这仍然具有2em的垂直半径。

我注意到在你的原始例子中你使用100em作为一个值 - 你需要确保你应用它的元素足够大，100em才能引人注目且值得。