7 Multi-column Layout Properties
By CSS3, to developers to create multi-column text layout. In CSS2 era, designed for multi-column layouts, layout mostly floating and absolute positioning layout in two ways. Floating layout more flexible, but need to write a lot of additional style code, and prone to dislocation in the page zoom and other operations, affect the overall results pages. Absolute positioning to be accurate way to position the label, but the label fixed position of the adaptive capacity can not meet the label, but also affect the joint document flow. Added CSS3 columns property, i.e., multi-column automatic layout function, this function automatically using the contents of the specified number of aligned columns (e.g., columns: 250px 3,250px column width is represented by number 3 represents the plurality of columns ). May be bonded to the spacing between the column-gap attribute definition column, column-rule binding properties define the width, style, and color of the border between each column. Sample code is shown below:
CSS3 multi-column layouts, there are many new attributes and characteristics, such as height column (column-fill) property and breakdown of printing, there is no longer details.
8 Gradient Properties
For normal gradient background, and are generally cut tile, as is the lateral or longitudinal Tile Tile depends on the actual situation, complex backgrounds can only cut FIG. However CSS3 lets Firefox, Safari, Chrome achieve color gradient, IE can use a filter, which is a method worth considering. Look at the syntax:
Properties "-moz-linear-gradient" 3 parameters. The first parameter indicates the direction of a linear gradient, top represent from top to bottom, left represent from left to right, if defined as a left top, it means from left to bottom right. The second and third parameters respectively indicates the starting and ending colors. More parameters may be inserted therebetween, a plurality of colors represented by the gradient.
Properties "-webkit-gradient" is to achieve the gradual WebKit engine, and a total of five parameters. The first parameter indicates the gradient type (type), may be a Linear (linear gradient) or Radial (radial gradient). The second and third parameters are a pair of values, respectively, the gradient start and end point of the gradient. This can be expressed in the form of coordinate values can also be represented by key figures, such as left top (upper left corner) and left bottom (bottom left corner). The fourth and fifth parameters are two color-stop function. color-stop function accepts two parameters, the first parameter represents a gradient of the position of 0 as a starting point, a midpoint of 0.5, 1 is the end point; a second parameter indicates the color point.
IE rely filter to achieve a gradual. startColorstr represents the starting point of color, endColorstr represent the color of the end. GradientType represents the gradient type, the default value 0, indicates the vertical gradient; 1 represents horizontal gradient.