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.