Border-radius: 2em 1em 4em/0.5em 3em; Compatibility ie9+, Firefox 4+, Chrome, Safari 5+, and Opera support Border-radius properties. Equivalent to: Border-top-left-radius:2em 0.5em;border-top-right-radius:1em 3em;border-bottom-right-radius:4em 0.5em; Border-bottom-left-radius:1em 3em;
CSS3 Background: Background-origin:padding-box | Content-box | Border-box background image relative to what to locateNote: If the Background-attachment property of the background image is "fixed", the property has no effect. Background-size
:Percentage | px | Cover | Contain background picture size cover: The background image is large enough to cover the background area, which may cause the background picture to be displayed incomplete contain: Background image expands to maximum size, fully fits the background area Background-clip:padding-box | Content-box | BORDER-BOX Specifies the background image of the drawing area multiple backgrounds: Background:url (), url ();
text Effects
Text-shadow and Word-wraptext-shadow:2px 2px 2px color, horizontal offset 2px, vertical offset 2px, blur distance 2px word-wrap:normal | Break-word Force Text Wrapping: (Word may be split) Text-overflow:clip | ellipsis | Stringstring: Represents the revised text with the given string (does not know how to use it) word-break:normal | Break-all | Keep-all rules non-Chinese and Japanese Korean characters interrupt mode Break-all: can be interrupted in any position Keep-all: only half-width spaces or hyphens out of the interrupt and Text-justify,text-wrap and other modern browsers do not support text properties
CSS3 Fonts@font-face Compatibility: ie9+ only supports. EOT type of text one: @font-face {font-family:myfirstfont; Src:url (' Sansation_bold.ttf '), url (' Sansation_bold.eot '); /* ie9+ */Font-weight:bold;} II: @font-face {font-family:myfirstfont; Src:url (' Sansation_bold.ttf '), url (' Sansation_bold.eot '); /* ie9+ */} I and II are two different fonts that will only load if the text is set to bold: Required parameters: Font-family:name;src:url; Optional parameters: Font-weight, Font-stretch, Font-style;
2D ConversionTransform:ie6-8 not supported; Additional browser private properties, compatible with lower versions (FF and opera not used): Translate (x, y), unit px;: scale (x, y) magnification or zoom in multiples of: skew (x, y) is played around X, y The angle of rotation, Unit deg matrix () has six parameters, is a collection of 2D conversions Transform-origin: (X-axis,y-axis,z-axis) defines the initial position of the transformation element: default 50%,50%;x-axis, Y-axis Value: Left | Center | Right | Length | %z-axis: Value length compatibility: Internet Explorer 10, Firefox, Opera support Transform-origin properties. Internet Explorer 9 supports an alternative-ms-transform-origin attribute (only for 2D conversions). Safari and Chrome support alternative-webkit-transform-origin attributes (2D conversion). Opera only supports 2D conversions.
3D Conversion:With rotate as an example Rotatex (deg), the 3d rotation rotate3d (x, Y, z) is defined with the center axis. Compatibility: Internet Explorer 10 and Firefox support 3D conversions. Chrome and Safari need a prefix of-webkit-. Opera still does not support 3D conversion (it only supports 2D conversions). Conversion Properties: Transform-style:flat | Presever-3d:flat; The child element does not retain its 3d position: preserve-3d; the child element retains its 3d position Preserve:number | None; Use this property with the Perspective-origin property so you can change the bottom position of the 3D elementWhen you define a perspective property for an element, its child elements get a perspective instead of the element itself
all browsers do not support Preserve,chrome and Safari support for alternative-webkit-perspective properties. Effect:-webkit-perspective:60; /* Safari and Chrome */-webkit-perspective:120; /* Safari and Chrome */backface-visibility:visible | Hidden: If the element is not face-to-screen compatibility, only Internet Explorer + + and Firefox support the Backface-visibility property. Opera 15+, Safari, and Chrome support alternative-webkit-backface-visibility properties.
CSS3 TransitionTransition:property duration timing-function delaydelay: Delay animation start time, default 0;that element needs a transition to set transition for him;to add a transition effect to multiple styles, add multiple attributes separated by commas: example: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;}
CSS3 Animations:@keyframes and animation current browsers do not support @keyframes rules. Firefox supports alternative @-moz-keyframes rules. Opera supports the substitution of @-o-keyframes rules. Safari and Chrome support alternative @-webkit-keyframes rules. Internet Explorer 10, Firefox, and Opera support @keyframes rules and animation properties. Chrome and Safari need a prefix of-webkit-. ANIMATION-DELAY:2S2S: Indicates that the animation jumps to the position where the object 2s,2s normal motion after staying in the original position -2s: The animation immediately appears at 2s of normal motion-------------------------------------------------animation-play-state:running | Pausedjs Syntax:
Object. style.animationplaystate= "Paused" Specifies whether the animation is running or stoppingIf you want to stop, the animation becomes easier to control.Animation-fill-mode:none | Forward | Backwards | Both; Specifies a state other than animation time none: does not change the default behavior.forward: When the animation is complete, keep the last property value (defined in the last Keyframe). Backward: Applies the start attribute value (defined in the first keyframe) for a period of
time specified by Animation-delay before the animation is displayed. Both: both forward and backward fill patterns are applied for example: div{-webkit-animation-delay:2s;} For the object that has the-webkit-animation-delay:2s set, it will delay 2s and immediately jump to the position where normal motion 2s is If you set this to be defined directly in the first keyframe in divkeyframes) animation-fill-mode:backward; animation 2s starts from the initial position
multi-column layoutsCompatibility IE9 and the following are not supported, ie10+ support the mainstream browser plus private properties Bar Column-count: Number of columns Column-gap: Interval between columns colum-rule:1px solid #ccc; There are many values that require a poor manual columns: 20px 3; Column width 20px, 3 columns Column-span: Column-fill: Not supported by mainstream browsers
CSS3 User InterfaceNew user interface features include resetting element size, box size, contour, etc. resize:ie,android Browser,ios Safari does not support box-sizing: only IE6 does not support outline-offset: useful??
New properties:Appearance:normal | icon | Button | Menu | Filed | Window Compatibility: The Appearance property is not supported by all major browsers. Firefox supports an alternative-moz-appearance property. Safari and Chrome support alternative-webkit-appearance properties. div{appearance:button;//causes the div-shaped btn} value to describe normal to render the element as a regular element. Icon renders the element as an icon (small picture). Window renders the element as a viewport. The button renders the element as a pushbutton. Menu renders the element as a set of options for the user to select. Field renders the element as an input field.The chrome test only btn btn;
Relive W3cshool CSS3
