开发者

How do we set the horizontal value component of a selected direction of border-radius directly?

开发者 https://www.devze.com 2023-03-25 22:18 出处:网络
MDC: A border-radius has 2 values per direction, one is the horizontal value and one is the vertical value.

MDC:

A border-radius has 2 values per direction, one is the horizontal value and one is the vertical value.

How do I set the horizontal value of a selected direction (let's assume selected direction is border-top-left-radius) without affecting the vertical value and vice-versa?

To be clear, assuming this is the start state:

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

How do I get to the end state:

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

I couldnt' simply style.borderTopLeftRadius="100em 2em"; since I do not know beforehand that the ve开发者_如何学编程rtical component is 2em.

One way I've thought of is to read the current border-top-left-radius using style.borderTopLeftRadius and do some string parsing to determine if the vertical value is set and if it is, extract that value.

Well of course I'm looking for a better solution than having to try to analyze the string. basically I'm looking for something like: style.borderTopLeftRadiusHorizontal="100em";


Haven't you just answered your own question? To set a border radius of 100em you set the value to 100em. I'm confused as to what you're trying to ask.

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

In this code block, the two values correspond to the horizontal and vertical radii, respectively. In this example, the top left corner will have a horizontal radius of 1em, and a vertical radius of 2em. Changing either value has no effect on the other value.

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

This would still have a vertical radius of 2em.

I noticed in your original example you used 100em as a value - you'd need to make sure the element you're applying this to is large enough for 100em to be noticeable and worthwhile.

0

精彩评论

暂无评论...
验证码 换一张
取 消