The background:
Some CSS properties such as background-image, text-shadow etc... take multiple values. But if my understanding is correct, the multiple values must come from the same statement. Is there any way to make it such as eg.: a CSS class appends a value to a property that already has a value?
/* CSS */
div.gradient1 {
background: linear-gradient(60deg, red 0%, orange 50%, red 100%);
}
div.gradient2 {
background: radial-gradient(at center, blue 10%, teal 50%, transparent 50%);
}
This fails (applies only one of the two gradients):
<div class="gradient1 gradient2"> ...
Can I modify gradient2 somehow to make it happen? Or is something like this not supported in CSS?
div.gradient2 {
background: currentBackground, radial-gradient(at center, blue 10%, teal 50%, transparent 50%);
}
There are more granular properties that make up the composite
backgroundsugar. You can usebackground-color, for example. Can you make it work piecemeal?The corresponding property would be
background-image(background-colordoes not seem to pick gradients, at least, as they are not color declarations) but the core problem is the same: there doesn't seem to be a mechanism refer to precomputed values of those properties.This. The styles should cascade