Lists the new features of CSS3 and the new features of css3.

Source: Internet
Author: User
Tags border image

Lists the new features of CSS3 and the new features of css3.

After having been in contact with CSS3 for so long, it is always necessary to use it directly, but it has not been well summarized, so let's sort it out here.

CSS3 border:

Rounded border:

Key: border-radius

<! DOCTYPE html> 


CSS3 border shadow:

Key: box-shadow

Syntax: Object selector {box-shadow: [projection method,] X axis offset, Y axis offset [, shadow blur radius] [, shadow extended radius] [, shadow color]}

Projection Method: this parameter is optional. If no value is set, the default projection method is the external shadow. If its unique value is "inset", the projection method is the inner shadow;

X-offset: horizontal shadow offset. The value can be positive or negative. If the value is positive, the shadow is on the right of the object. If the value is negative, the shadow is on the left of the object;

Y-offset: the vertical offset of the Shadow. The value can also be positive or negative. If it is a positive value, the shadow is at the bottom of the object, and its value is negative, the shadow is at the top of the object;

Shadow blur radius: this parameter is optional, but its value can only be a positive value. If its value is 0, it indicates that the shadow has no blur effect, and the greater the value, the blurrier the edge of the shadow;

Radius of shadow Extension: this parameter is optional. The value can be positive or negative. If the value is positive, the entire Shadow is extended. If the value is negative, the shadow is reduced;

Shadow color: this parameter is optional. If no color is set, the browser will take the default color, but the default color of each browser is inconsistent, especially in the safari and chrome browsers under the webkit kernel, it is black (verified) in Firefox/Opera. We recommend that you do not omit this parameter.



CSS3 border image:


For example:

Div {border-image: url(border.png) 30 round;-moz-border-image: url(border.png) 30 round;/* Firefox */-webkit-border-image: url(border.png) 30 30 round;/* Safari and Chrome */-o-border-image: url(border.png) 30 30 round;/* Opera */}


CSS3 Background:

The background-size attribute specifies the size of the background image.

Div {background: url(bg_flower.gif);-moz-background-size: 63px 100px;/* earlier Firefox */background-size: 63px 100px; background-repeat: no-repeat ;}

The background-origin attribute specifies the location of the background image.

div{background:url(bg_flower.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;}

CSS3 multi-background image

body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}


CSS3 text effects

CSS3 text shadow

h1{text-shadow: 5px 5px 5px #FF0000;}

CSS3 automatic line feed

p {word-wrap:break-word;}

In the new @ font-face rule, you must first define the font name (for example, myFirstFont) and then point to the font file.

To use a font for HTML elements, use the font-family attribute to reference the font name (myFirstFont ):

<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),     url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>


CSS3 2D Conversion

Translation: translate

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px);        /* IE 9 */-webkit-transform: translate(50px,100px);    /* Safari and Chrome */-o-transform: translate(50px,100px);        /* Opera */-moz-transform: translate(50px,100px);        /* Firefox */}

Rotation: rotate

div{transform: rotate(30deg);-ms-transform: rotate(30deg);        /* IE 9 */-webkit-transform: rotate(30deg);    /* Safari and Chrome */-o-transform: rotate(30deg);        /* Opera */-moz-transform: rotate(30deg);        /* Firefox */}

Scale: scale

By using the scale () method, the element size increases or decreases according to the given width (X axis) and height (Y axis) parameters:

Div {transform: scale (2, 4);-ms-transform: scale (2, 4);/* IE 9 */-webkit-transform: scale (2, 4 ); /* Safari and Chrome */-o-transform: scale (2, 4);/* Opera */-moz-transform: scale (2, 4);/* Firefox */}

Turning: skew

The skew () method is used to flip an element to a given angle based on the given horizontal line (X axis) and vertical line (Y axis) parameters:

div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg);    /* IE 9 */-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */-o-transform: skew(30deg,20deg);    /* Opera */-moz-transform: skew(30deg,20deg);    /* Firefox */}


CSS3 3d Conversion

RotateX ()

Rotate along the X axis

RotateY ()

Rotate along Y axis


CSS3 transition

With CSS3, we can add effects (smooth transition) to elements when elements are transformed from one style to another without Flash animation or JavaScript ).

Add transition effects to width, height, and conversion:

div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}



You need to specify a starting and ending status,

Then add transition to the div: wide transition time, high transition time, and transition time

Transition: [wide transition time] [, high transition time] [, transition time]


CSS3 Animation

Set action @ keyframes

@keyframes myfirst{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}

Set category

  animation:myfirst 5s;

Add the category class to the DIV




animation:name duration timing-function delay iteration-count direction

Name: @ Keyframes name

Duration: Specifies the time taken to complete the animation, in seconds or milliseconds.

Timing-function: Specifies the animation speed curve.

Timing-function value Description
Linear Uniform speed
Bytes Slow speed
Callback-in Low Speed
Timed-out Low Speed end
Memory-in-out Low Speed start and end
Cubic-bezr (n, n) In the cubic-bezr function, the value ranges from 0 to 1.








Delay: The delay before the animation starts, in seconds.

Iteration-count: Specifies the number of times the animation is played: the specific value or infinite (unlimited ).

Direction: Specifies whether to play the animation in turn. Normal playback and alternate reverse playback in turn.


CSS3 multiple columns:

Create multiple columns for text Layout

Div {-moz-column-count: 3;/* Firefox */-webkit-column-count: 3;/* Safari and Chrome */column-count: 3 ;}


CSS3 user interface

div{border:2px solid;padding:10px 40px; width:300px;resize:both;overflow:auto;}


The new features of CSS3 are summarized here. I personally think that conversion and animation are the focus and need to be well mastered.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.