1, CSS3 border:
- BORDER-RADIUS:CSS3 rounded border. It's tricky to add rounded rectangles in CSS2, we have to use different pictures for each fillet, in CSS3, it's very easy to create fillets, and in CSS3, the Border-radius property is used to create rounded corners. BORDER:2PX solid;
- BOX-SHADOW:CSS3 border Shadow. In CSS3, Box-shadow is used to add a shadow to a box. box-shadow:10px 10px 5px #888888;
- BORDER-IMAGE:CSS3 border picture. With the Border-image property of CSS3, you can use a picture to create a border. Border-image:url (border.png) round;
2, CSS3 background:
- Background-size: property specifies the size of the background picture. Before CSS3, the size of the background image is determined by the actual size of the picture. In CSS3, you can specify the size of the background image, which allows us to reuse the background image in different environments. You can specify dimensions in pixels or percentages. If the dimension is specified as a percentage, the size is relative to the width and height of the parent element.
- Background-origin: attribute specifies the location area of the background image. The background image can be placed in the Content-box, Padding-box, or border-box areas.
3, CSS3 text effect:
- Text-shadow: In CSS3, Text-shadow can apply a shadow to text. text-shadow:5px 5px 5px #FFFFFF;
- Word-wrap: If the word is too long, you may not be able to go beyond an area, allow splitting of long words, and wrap to the next line: P{word-wrap:break-word;}
4, CSS3 2D conversion:
Transform: With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements.
- Translate (): The element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters: Transform:translate (50px,100px); value translate (50px,100px) Move the element 50 pixels from the left and 100 pixels from the top.
- Rotate (): The element rotates the given angle clockwise. Negative values are allowed, and the elements rotate counterclockwise. Transform:rotate (30deg); value rotate (30deg) Rotates the element clockwise by 30 degrees.
- Scale (): The size of the element increases or decreases, depending on the given width (X axis) and height (Y-axis) Parameters: Transform:scale (2,4), the value scale (2,4) converts the width to twice times the original size, and converts the height to 4 times times the original height.
- Skew (): the element rotates the given angle according to the given horizontal (x-axis) and vertical (Y-axis) Parameters: Transform:skew (30deg,20deg), the value skew (30deg,20deg) rotates the element 30 degrees around the X-axis and rotates 20 degrees around the Y-axis.
- Matrix ():
The matrix () method combines all 2D conversion methods.
The matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements.
5, CSS3 3D conversion:
- Rotatex (): The element rotates around its X axis in a given degree. Transform:rotatex (120DEG);
- Rotatey (): The element rotates around its Y axis in the given degree. Transform:rotatey (120DEG);
6. CSS3 Transitions: Adds an effect to an element when the element is transformed from one style to another. 7. CSS3 Animation: Through CSS3, we are able to create animations that can replace animated images, Flash animations, and JavaScript in many Web pages. 8, CSS3 Multi-column:
- Column-count: attribute specifies the number of columns that the element should be delimited.
- Column-gap: attribute specifies the interval between columns.
- Column-rule: Property Sets the width, style, and color rules between columns.
9. CSS3 User interface:
- Resize: property specifies whether the element size can be adjusted by the user.
- Box-sizing: Properties allow you to define exactly what is appropriate for a particular area.
- Outline-offset: The property offsets the outline and draws the outline at a position beyond the edge of the border.
Day 95th: CSS3 border, background, and text effects
