Css3 practices (2): Box Model and border)

First of all, I would like to thank all the netizens for their support. For the latest CSS standards, refer to the website:.

1. CSS Box Model

First, let's review the Box Model of CSS. The box model is the soul of CSS + Div layout. The following figure shows everything:

The inmost part of the element box is the actual content, and the content is directly surrounded by the padding. The padding shows the background of the element. The edge of the padding is the border. The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements. Box-shadow is added to css3 ).

1.1 box-shadow

The shadow of the box must use images to achieve this effect in css2, and it is not very flexible.

Syntax: Box-Shadow:H-shadow V-shadow blur spread colorInset;

Note:

Value	Description
H-shadow	Required. Shadow offset in the horizontal direction. It can be positive or negative.
V-shadow	Required. Shadow offset in the vertical direction. It can be positive or negative.
Blur	Optional. Fuzzy distance
Spread	Optional. Shadow size
Color	Optional. shadow color. The default value is black.
Inset	Optional. Change the shadow from the external shadow to the internal shadow.

Instance:

. Shadow1 {background-color: #660066; width: 200px; Height: 100px; margin-bottom: 50px; box-Shadow: 50px 50px 20px # 9966ff ;}
 

2 css3 borders

In css3, I can define a border (border-radius) and an image border (border-image). In the past, I wanted to achieve these effects using images and related htmlCodeIt is also very complicated. Now we can achieve these effects only by defining the relevant CSS. I'm looking forward to it.

2.1 border-radius

Defining the rounded border in css2 is awkward. We need to define an image for each corner,

Syntax: border-radius:1-4 Length|%/1-4 Length|%;

Extended: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius

Note:

<Length>: A length value composed of floating point numbers and unit identifiers. It can be a specific value or a percentage, but cannot be a negative value. The first value is the horizontal radius, and the second value is equal to the first value by default. This is the 1/4 rounded corner. The second value is generally used to control the Radian of the rounded corner.

The following is an example:

. Border1 {width: 150px; Height: 80px; Background-color: # 6699ff; Border: 2px solid; border-radius: 20px 5px 20px 5px/10px 5px 10px 5px ;}

Border-radius: The related definition can be equal

Border-top-left-radius: 20px 10px;
Border-top-right-radius: 5px 5px;
Border-bottom-right-radius: 20px 10px;
Border-bottom-left-radius: 5px 5px;

 

Next I will draw a circle for you:

Note: You may have to add a browser prefix for some earlier versions of browser, such as (-WebKit-border-radius: 20px 5px 20px 5px/10px 5px 10px 5px)

2.2 border-Image

It is a pity that ie9 does not support specifying an image as the border of the element.

Syntax: border-image:Source slice width outset repeat;

Note:

Value	Description
Border-image-Source	Border image path
Border-image-slice	Inside the border image
Border-image-Width	Border Image Width
Border-image-outset	The border chart is extending out of the box. Currently, it is not supported by all browsers.
Border-image-repeat	Repeated border image types: tiled (rounded) Stretch (stretched)

Instance:

Below are the images used by my border, which are found on the Internet

Related CSS code:

. Borderimage1 {border-width: 15px; width: 220px; padding: 10px 20px; border-image: URL ('images/border.png ') 30 30 round;-moz-border-image: URL ('images/border.png ') 30 round;/* Firefox */-WebKit-border-image: URL ('images/border.png') 30 round; /* safari and chrome */-o-border-image: URL ('images/border.png ') 30 round;/* opera */}

Border-image-repeat: roundborder-image-repeat: Stretch

 

2.3 border-color

In Firefox, border-color is expanded. If you set the Border width to x px, you can use X colors on this border, the 1px width is displayed for each color. If the width of your border is 10 pixels but only 5 or 6 colors are declared, the last color will be added to the remaining width.

Next, write an instance under Firefox:

. Bordercolor {width: 200px; Height: 60px; Border: 7px solid #000; padding: 3px 3px 3px 6px;-moz-border-bottom-colors: #006 # 33f # 36f # 69f # 9cf # CCF;-moz-border-top-colors: #606 # c0c # f0f # f6f # f9f # FCF; -Moz-border-left-colors: #030 #093 #3c3 #6f6 #9f9 # CFC;-moz-border-right-colors: #630 # C90 # ff0 # ff6 # ff9 # FFC ;}

You can see the border color gradient effect in Firefox

 

At this point, the content of this chapter has been completed, hoping that these new CSS effects will give domestic web designers more inspiration and create better-looking web pages.

In the next chapter, I will explain color and backgroud.