Summary of several new attributes in CSS3 1

2015-12-0319:04:09

1.CSS3 Support Browser: version after chrome,safari,firefox,opera,ie10.
2. In the writing CSS3 style, different browsers may need a prefix that is not used: It indicates that the CSS property or rule has not yet become part of the Web Standard and is a private property of the browser.

Prefix browser
-webkit Chrome and Safari
-moz Firefox
-ms IE
-O Opera
3. Fillet angle Realization
1.border-radius:10px; All corners use rounded corners with a radius of 10px.
2.border-radius:5px 4px 3px 2px; The four RADIUS values are the upper-left corner, the upper-right corner, and the lower-right corner clockwise.
3. Units can be: Px,em, and percentages.
Semi-circle implementation:
CSS3: #two {height:50px; width:100px; background: #9da; border-radius:50px 50px 0 0;margin:0 Auto;}
HTML: <div class= "Two" ></div> <!--height is half the width, only the upper-left and upper-right corners are set to the same height as the elements. Greater than is also possible--
The implementation of a solid circle:
CSS3: #three {height:100px; width:100px; background: #269abc; border-radius:50px; margin:0 Auto;}
Html:<div class= "three" ></div> <!--height and width are equal, the radius of the corners and the height of the element is half----
4.box-shadow is to add a shadow effect to the box. Support for adding one or more.
Syntax: X-axis offset, y-offset, [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode]
Parameter description: X-axis offset: required, horizontal shadow position, allowable negative value
Y-axis offset: required, vertical shadow position, allowable negative value
Shadow Blur radius: optional, blur distance
Shadow expansion radius: optional, shadow size
Shadow color: Optional, shadow color, omit default to Black
Projection mode: Optional. Internal projection when setting inset, if omitted as outer shadow
Note: Inset can be written on the first or last of the parameters, and other positions are invalid.
Example:
<style type= "Text/css" >
* {margin:0; padding:0; border:none; list-style:none;}
#a {height:100px; width:100px; box-shadow:-1px-1px 6px #333; margin:0 auto; margin-top:100px;}
#b {height:100px; width:100px; box-shadow:1px 1px 6px #333 inset; margin:0 auto; margin-top:100px;}
#c {margin:0 auto;
margin-top:100px;
height:100px;
width:100px;
box-shadow:4px 2px 6px #f00,
-4px-2px 6px #000,
0 0 12px 5px #33cc00 inset;
}
</style>

<div id= "A" > Set outer shadow for element </div>
<div id= "B" > Set inner shadow for element </div>
<div id= "C" > Add multiple Shadows </div>

Summary of several new attributes in CSS3 1