How to make a CSS3 elastic box

Sometimes we need to write a flexible box in CSS3, so how does this code work? This needs to use our Box-shadow attribute, he can let the box in the display when the shadow effect, the following will give you a detailed explanation

Writing:

Box-shadow:length length length color;

The first parameter indicates the horizontal distance the shadow left the box

The second parameter indicates the vertical distance the shadow left the box

The third parameter represents the blur radius of the shadow

The fourth parameter indicates the color of the shadow

Use shadows for elements inside a box

You can use shadows separately for child elements within a box.

You can use the First-letter selector or the first-line selector to make only the first text or the first line have a

Shadow effect

Use shading on tables and cells

You can use the Box-shadow property to create a shadow effect on cells in tables and tables.

Specify a method for calculating the width and height of an element

In CSS3, use the Box-sizing property to specify the calculation method for the width and height of the element

Box-sizing Property

In CSS, you specify the width and height of the element using the Width property and the Height property.

However, using the Box-sizing property, you can specify the widths specified with the Width property and the Height property, respectively, and

Whether the height value contains the padding area inside the element, as well as the width and height of the border.

The property value that can be specified for the Box-sizing property is the Content-box property value and the Border-box property value. The former indicates that the width and height of the element do not include the inner filler area, and the width and height of the border

, which indicates that the width and height of the element include the inner padding area, as well as the width and height of the border.

The previous default is to use the Content-box property value.

In addition, you can specify the genus in the Box-sizing property

The value of Padding-box, which is the specified width and

Height content includes the width and height of the content and the internal

Width and height of the part filler area, excluding edges

Width and height of the box

The purpose of the use is to control the total width of the element, and if the property is not used, the default style used in the

is a Content-box property value that specifies only the width of the content, but does not have an element

The total width is specified.

In some cases, using the Border-box attribute value will make the page layout more convenient.

example, if you set the value of the Border-box property of the two DIV elements to 50%, you can ensure that two div

The elements are displayed in parallel.

This is the practice of flexible box, more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

How to insert a picture in HTML

What to look for in the HTML Div Center

How to use the IF comment in HTML