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.
精彩评论