Game Development Reference
In-Depth Information
and is rendered right between the two columns, making use of the space provided
by a column-gap. If the space available for a column rule is greater than the space
provided by a column gap, the gap is rendered properly and the rule is ignored.
<style>
div {
column-count: 3;
column-gap: 20px;
column-rule-width: 1px;
column-rule-style: dashed;
column-rule-color: rgb(255, 10, 10);
</style>
Again, similar to a border property, we can specify each attribute related to a column
rule, or short hand the definition in the same order as a border (width, style, and col-
or, respectively). Valid values for a border style include the following:
•
none
: No border
•
dotted
: The border is a series of dots
•
dashed
: The border is a series of short line segments
•
solid
: The border is a single line segment
•
double
: The border is two solid lines. The sum of the two lines and the
space between them equals the value of 'border-width'
•
groove
: The border looks as though it were carved into the canvas
•
ridge
: The opposite of 'groove': the border looks as though it were com-
ing out of the canvas
Note
For more information on the table border styles, you can visit
http://www.w3.org/
Column breaks
Sometimes, we may want a bit of control over where exactly the content breaks into
a new column. For example, if we have several blocks of text, each preceded by
