CSS3 new attribute comments and examples_html/css_WEB-ITnose

Here is a separate explanation of the new properties of CSS3:

The border-radius property is used to create rounded corners

div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */}

　

border-shadow is used to add a shadow to the box

div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;}

　

The border-image attribute allows you to specify the image used for the border

div{border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */-o-border-image:url(border.png) 30 30 round; /* Opera */}

　

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

div{background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;}

　

background-repeat sets or retrieves how the object's background image is laid out and filled. The background-image attribute must be specified first.
repeat-x: The background image is tiled horizontally
repeat-y: The background image is tiled vertically
repeat: The background image is tiled horizontally and vertically
no-repeat: The background image is tiled vertically Untiled
round: The background image automatically scales until it fits and fills the entire container. (CSS3)
space: The background image is tiled with the same spacing and fills the entire container or a certain direction. (CSS3)

The background-origin attribute specifies the positioning area of ​​the background image
The background image can be placed in the content-box, padding-box or border-box area

text- shadow applies a shadow to the text

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

　

The word-wrap attribute allows you to allow the text to force the text to wrap - even if it means splitting the words

In the new @font-face rule, you must first define the name of the font (such as myFirstFont) and then point to the font file.
To use a font for an HTML element, reference the font name (myFirstFont) through the font-family attribute

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

　

matrix() method Groups all 2D transformation methods together. The
matrix() method takes six parameters and contains mathematical functions that allow you to: rotate, scale, move, and tilt elements.

div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Opera */}

　

Not complete yet, will be updated later. Recommended link: http://www.w3school.com.cn/css3/index.asp