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

Today, the editor will share with you the relevant knowledge points about the use of CSS3 technology, with detailed content and clear logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. 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

2. Font

@ font-face {font-family: font name; src: relative or absolute path of the font file on the server;}

Call: font-family: font name

3. 3D deformation

Displacement: translate3d (xjinger z), translateZ (z) zooming: scale3d (xreco yrez), scaleZ (z) rotation: rotate3d (xjinyjinjianzjiangle), rotateZ (angle)

4. Multi-column layout

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 | all

5. Box model

Box-sizing: content-box | border-box | inherit

6. Free scaling attribute

Resize:none | both | horizontal | vertical | inherit

7. Prefix

-webkit- (chrome and Safari),-moz- (firefox),-ms- (IE),-o-(opera)

8. Frame

Fillet: border-radius: 5px 4px 3px 2px; / * clockwise * /

Shadows: box-shadow: X axis offset Y axis offset

[shadow blur radius] [shadow expansion radius] [shadow color] [projection method]

/ * default outer shadow * / external 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: image path pixel clockwise extension (repeat repeat

Round tile stretch stretch) border-image:url (border.png) 30 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 * /

9. 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%

10. Gradual change

Linear gradient: / / default from top to bottom, you can change direction and angle

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 * /

These are all the contents of this article entitled "what are the techniques for the use of CSS3?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.