5610af1b77
Parse things like "in hsl hue longer". For details, see the CSS Images Module Level 4, https://www.w3.org/TR/css-images-4. Tests included. Gradient interpolation color spaces aren't supported for rendering yet.
55 lines
1.3 KiB
CSS
55 lines
1.3 KiB
CSS
a {
|
|
background-image: radial-gradient(yellow, green);
|
|
}
|
|
|
|
b {
|
|
background-image: radial-gradient(ellipse at center, yellow 0%, green 100%);
|
|
}
|
|
|
|
c {
|
|
background-image: radial-gradient(farthest-corner at 50% 50%, yellow, green);
|
|
}
|
|
|
|
d {
|
|
background-image: radial-gradient(circle, yellow, green);
|
|
}
|
|
|
|
e {
|
|
background-image: radial-gradient(red, yellow, green);
|
|
}
|
|
|
|
f {
|
|
background-image: radial-gradient(farthest-side at left bottom, red, yellow 50px, green);
|
|
}
|
|
|
|
g {
|
|
background-image: radial-gradient(closest-side at 20px 30px, red, yellow, green);
|
|
}
|
|
|
|
h {
|
|
background-image: radial-gradient(20px 30px at 20px 30px, red, yellow, green);
|
|
}
|
|
|
|
i {
|
|
background-image: radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
|
|
}
|
|
|
|
j {
|
|
background-image: radial-gradient(20px 20px at 20px 30px, red, yellow, green);
|
|
}
|
|
|
|
k {
|
|
background-image: radial-gradient(in srgb 20px 20px, red, yellow);
|
|
border-image-source: repeating-radial-gradient(in srgb 20px 20px, red, yellow);
|
|
}
|
|
|
|
l {
|
|
background-image: radial-gradient(in oklch 20px 20px, red, yellow);
|
|
border-image-source: repeating-radial-gradient(in oklch 20px 20px, red, yellow);
|
|
}
|
|
|
|
m {
|
|
background-image: radial-gradient(circle in hsl longer hue, red, yellow);
|
|
border-image-source: repeating-radial-gradient(circle in hsl longer hue, red, yellow);
|
|
}
|