What are the techniques for using CSS3?
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.
