Several CSS3 tag shorthands (recommended)

border-radius: CSS3 rounded corners
Syntax: border-radius: 25px;

Ellipse corners: Syntax -border-radius: xx%; or 15px/100px;

box-shadow: CSS3 box shadow
Syntax: box-shadow: 5px 5px 10px #eee;

border-image: Create a border using an image
Syntax: border-image:url(xx.xxx) 30 30 round
Round means flattening, stretch means stretching

background-size: Customize the size of the background image
Syntax: background-size:--px --px;
The background image completely fills background-size: 100% 100%;

background-origin: specifies the location area of ​​the background image border-box padding-box content-box

CSS3 allows multiple background images: background-image:url(img_flwr.gif),url(img_tree.gif);

CSS3 Gradients

linear-gradients: linear gradient
Syntax: background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

Use transparency
Syntax: linear-gradients（to right,rgb(255,0,0,0),rgb(255,0,0,1));

To add transparency, we use the rgba() function to define the color stops. The last argument in the rgba() function can be a value from 0 to 1 that defines the transparency of the color: 0 means completely transparent, 1 means completely opaque.

radial-gradients: radial gradient
The syntax is the same as for linear-gradients and is not repeated here.

text-shadow: text shadow
Syntax: text-shadow: --px --px --px #eee;

word-wrap:break-word If a word is too long to overflow the text box, this tag forces a line break

The above article on several CSS3 tag shorthands (recommended) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/zhouliang/archive/2016/07/06/5647213.html