Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "CSS3 use case analysis". The editor shows you the operation process through the actual case, and the operation method is simple, fast and practical. I hope this "CSS3 use case analysis" article can help you solve the problem.

1. Prefix-webkit- (chrome and Safari),-moz- (firefox),-ms- (IE),-o-(opera) 2, border fillet: border-radius: 5px 4px 3px 2px; / * clockwise * / shadow: box-shadow: X axis offset Y axis offset [shadow blur radius] [shadow extended radius] [shadow color] [projection mode] / * default outer shadow * / outer shadow: box-shadow:4px 2px 6px # 333333; inner shadow: box-shadow:4px 2px 6px # 333333 inset; multiple shadows: box-shadow:4px 2px 6px # f00,-4px-2px 6px # 000000, 0px 0px 12px 5px # 33CC00 inset; border picture: border-image: picture path pixel clockwise extension (repeat repeat round tiling stretch stretch) border-image:url (border.png) 30 round -webkit-border-image:url (border.png) 30 30 round; / * Safari 5 and older * /-o-border-image:url (border.png) 30 30 round; / * Opera * / 3, background background size: background-size: auto | cover | contain origin: background-origin: border-box | padding-box | content-box Crop: background-clip: border-box | padding-box | content-box | no-clip multiple background: background: [background-color] | [background-image] | [background-position] [/ background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],.

[example] background:url (logoindex.png) no-repeat left top/75% 50%, url (logoindex.png) no-repeat right bottom/50% 45%

4. Linear gradient: / / default from top to bottom, direction and angle can be changed background:-webkit-linear-gradient (red, blue); / * Safari 5.16.0* / background:-o-linear-gradient (red, blue); / * Opera 11.112.0* / background:-moz-linear-gradient (red, blue); / * Firefox 3.615 * / background: linear-gradient (red, blue) / * Standard syntax * / Radial gradient: background:-webkit-radial-gradient (red, green, blue); / * Safari 5.16.0* / background:-o-radial-gradient (red, green, blue); / * Opera 11.612.0* / background:-moz-radial-gradient (red, green, blue); / * Firefox 3.615 * / background: radial-gradient (red, green, blue) / * Standard syntax * / 5, text effect shadow: text-shadow:X offset Y offset blur shadow color Text-shadow: 5px 5px 5px # FF0000; text overflow: text-overflow:ellipsis; overflow:hidden; white-space:nowrap;6, font @ font-face {font-family: font name; src: the relative or absolute path of the font file on the server;}

Call: font-family: font name

7. 2D deformation (transform: with prefix-ms--webkit-)

8. 3D deformation displacements: translate3d (xpeny ypenz), translateZ (z) scaling: scale3d (xrecedence z), scaleZ (z) rotation: rotate3d (xrecoery yphaz), rotateZ (angle) 9, transition (transition: with prefix-webkit-)

10. Animation (- webikt-)

[example] @ keyframes myfirst, @-webkit-keyframes myfirst div {animation: myfirst 5s linear 2s infinite alternate;-webkit-animation: myfirst 5s linear 2s infinite alternate;} 11, multi-column layout columns: (column-width) | | (column-count); column-width: auto | (length); column-count:auto | (integer) Column spacing column-gap: normal | | (length) list border column-rule: (column-rule-width) | (column-rule-style) | (column-rule-color) Cross-column setting column-span: none | all12, CSS3 outer outline attribute outline: [outline-color] | | [outline-style] | | [outline-width] | [outline-offset] | | inherit |

Outline:2px solid red;outline-offset:15px;13, box model box-sizing: content-box | border-box | inherit14, free scaling attribute resize:none | both | horizontal | vertical | inherit's content on "CSS3 usage case analysis" ends here. Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.