I am looking for the meaning of the symbol /
. I googled it without anky kind of sucess.
You can find everywhere, but here an example from today :
#identity:before
{
/* some useless stuffs */
border-radius: 30% 0% 30% 0%/75% 0% 75% 0%;
}
I already saw it with a font-size
property.
I am not sure this question belongs to here. Say me, if I have to move it.
Thank you.
UPDATE
Chris B post a link about the case of font-size
.
font: 12px/18px
mean :
font-size: 12px;
line-height: 18px;
It is a shorthand. Now, what the point with border-radius
?
"If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally."
The slash in the code from your post is shorthand and differentiates between the vertical and horizontal radii.
http://www.w3.org/TR/css3-background/#border-radius
From the link above:
border-radius: 4em;
is equivalent to
border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;
and
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
CSS grammar has three types of list elements separators:
So that border-radius above can be written in LISP style as this:
(30% 0% 30% 0%) (75% 0% 75% 0%);
list of two elements where each element is a list of four elements by itself.
Unfortunately CSS grammar is not consistent with priority of this separators.
In border-radius
property ' '
has higher priority than '/'
but in font declaration priorities are different, so this:
font:italic bold 12px/30px Georgia, serif;
gets parsed as this
font:italic bold (12px 30px) (Georgia serif);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With