10 commonly used CSS3 knowledge sharing

With the development of the times, front-end knowledge has been updated, with the purpose of making the user experience better and work efficiency higher. The emergence of CSS3 allows us to create more cool effects in a simple way. We have compiled 10 commonly used CSS3 properties at work. Welcome to refer to them.

1. Text effect

Shadow: text-shadow: X offset Y offset blur degree 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 font file on the server Path;}
Call: font-family: font name;

3. 3D deformation

Displacement: translate3d(x,y,z), translateZ(z) scaling: scale3d( x,y,z), scaleZ(z) rotation: rotate3d(x,y,z,angle), rotateZ(angle)

4. Multi-column layout

Multi-column layout columns: (column-width) || (column-count); column-width: auto | (length); column-count: auto | (integer); column gap column-gap: normal || (length) list border column-rule :(column-rule-width)|(column-rule-style)|(column-rule-color) Set column-span across columns: 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, border

Rounded corners: border-radius: 5px 4px 3px 2px; /* clockwise*/
Shadow: box-shadow: X-axis offset Y-axis offset
[Shadow blur radius] [Shadow expansion radius] [Shadow color] [Projection method];
/* 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 #000, 0px 0px 12px 5px #33CC00 inset;
Border image: border-image: Image path pixel clockwise extension method (repeat Repeat
round tile 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

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 backgrounds: 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. Gradient

Linear gradient: //The default is from top to bottom, the direction and angle can be changed
background: -webkit- linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* Standard syntax*/
Radial gradient: background: -webkit-radial-gradient(red, green, blue ); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* Standard syntax*/

The above is the detailed content of 10 commonly used CSS3 knowledge sharing. For more information, please follow other related articles on the PHP Chinese website!