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
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
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
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!
How to insert a picture in HTML
What to look for in the HTML Div Center
How to use the IF comment in HTML