Web Design _5_ Free box-type components

1. CSS3 Border-radius round Corner Rectangle box

Rounded rectangular box assemblies are often used in page layouts and can be easily created using CSS3 's Border-radius.

And there is good scalability and flexibility in the horizontal longitudinal.

Border-radius need to be compatible with the browser,-webkit-and-moz-Some of the syntax is a little different .

It is recommended that the http://border-radius.com/directly set the fillet and generate the code automatically.

Note: IE8 and the following versions are incompatible Border-radius, is not particularly important can not be ignored, it is necessary to be compatible with the introduction of background images to make rounded corners.

A rectangular box component with the same rounded corners of the page, the class style is set uniformly to facilitate management and maintenance.

2. Background to create rounded rectangles with pictures

How to achieve horizontal and vertical extensibility by introducing images.

(1) need to have enough nested tags to introduce background images;

(2) The background image requires sufficient height and width

(3) The same background image is introduced in the upper and lower left corner, and the same background image is introduced in the upper right and lower right corner.

The structure label is: for the. Container. Desc. link em four to introduce background images, respectively, on the top right, left, bottom left, bottom right.

<Divclass= "Container">    <Pclass= "desc">This box is:</P>    <Pclass= "link"><em><ahref="#">indestructible!</a></em></P></Div>

Background image 1, requires enough height, the upper left and lower left corner of the introduction of the same picture, the background picture is located in the upper left and bottom left corner.

Background picture 2, requires enough width and height, and the same picture is introduced in the upper right and lower right corner. The background image is divided into the upper right and lower right corner.

3. Arrows for flexibility

When the text size changes, the white space around the text and the Arrows are aligned on both sides of the scale.

(1) HTML structure code is simple

< H2 > This way! </ H2 >

(2) need a large size of the arrow background map, set the background map position is up and down center 50% position ,

(3) The width value of the H2 needs to be set, and the padding value is the rem unit

Web Design _5_ Free box-type components