124 Chapter 11
The color-stops are processed in the order listed, so this example creates
a gradient that goes from black to white then back to black. Figure 11-3 shows
the result.Figure 11-3: A gradient with three color-stopsColor-stops are evenly distributed along the length of the gradient, so,
in this case, the white color-stop is exactly halfway between the two blacks,
at the middle point of the gradient. You can alter this distribution by add-
ing a length or percentage value after each color-stop to shift the pointAnGle uniTS
A variety of angle units, used to represent angular measurement, are defined
in the CSS3 Values and Units Module (http://www.w3.org/TR/css3-values/
#angle/ ). The unit that most of us learn in school is degrees (deg), where a full
circle has 360 degrees, and this is the unit I use throughout this chapter. Of the
alternatives, one is gradians (grad), which are measured on a scale where a
full turn around a circle is equal to 400 gradians. Another, radians (rad), is
based on π (pi), where a full circle is 2π radians, or approximately 6 .2832rad.
Still another unit is the turn, where one full circle is equal to 1 turn, although as
of this writing only Firefox and Internet Explorer 9+ support this.
Table 11-1 shows some equivalent values of the different angle units.table 11-1: Equivalent Angle Values
degrees Gradians radians turns
60 66 .66667 1 .04720 0 .16667
90 100 1. 5708 0. 25
240 266 .66667 4 .18879 0 .66667As you can see, degrees tend to provide the cleanest and most familiar
values, so unless you’re doing something very mathematically specific, like cal-
culus, you’ll usually use degrees.