This article gives you a comprehensive overview of the common CSS3 apis.

preface

Hello everyone, this article is to introduce cSS3 new features style, selector, color gradient, 2D conversion, 3D conversion and other API usage. These usages are also fundamental to our development, so don’t take them lightly.

Hope the old iron of this article, leave your attention and like, the following nuggets will update the new article constantly.

This article has the corresponding explanation video “CSS3 intensive”, remember to pay attention to – like – favorites oh

CSS 3 introduction

CSS3 is the latest version of the Cascading Style Sheet language. It brings a number of long-awaited new features, and the new features CSS3 brings are grouped into “modules.” Examples are new selectors, rounded corners, shadows, gradients, transitions, animations. And new layouts

Styles of new features

Most of the background

1.background-image

Use this property to add a background image. Different background images and images are separated by commas, with the first setting always displayed at the top

body{
background-image: url(images/hello2.jpeg),url(images/timg.jpeg);
background-repeat: no-repeat,repeat;
background-position: center top,center top;  
}
Copy the code

You can set several different properties for different images

body{
    background: url(images/hello2.jpeg) no-repeat center top,url(images/timg.jpeg) repeat center top;
}
Copy the code

2.background-size

This property specifies the size of the background image. Before CSS3, the background image size was determined by the actual size of the image.

In CSS3, you can specify the size of the background image. The specified size is the size of the parent element as a percentage of its width and height

Grammar:

background-size: cover|contain;
Copy the code

• Cover covers the entire container with the original zoom ratio of the background image
• Contain contains the background image according to the original scale ratio, complete display to the container

The background image completely fills the content area

div{
    width: 400px;
    height: 400px;
    background: url(images/hello2.jpeg) no-repeat;
    background-size: 100% 100%;
}
Copy the code

Example: Set up a large background image and scale it as you stretch the browser

body{
    background-image: url(images/hello.jpeg);
    background-size: cover;
}
Copy the code

3.background-origin

This property specifies the location area of the background image

The content-box,padding-box, and border-box areas can place background images.

div{
    width: 400px;
    height: 400px;
    padding: 20px;
    border: 10px solid #ff0000;
    background: url(images/hello2.jpeg) no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
}
Copy the code

Effect display:

4.background-clip

Specifies the background of the drawing area

div{
    width: 400px;
    height: 400px;
    padding: 20px;
    border: 10px solid #ff0000;
    background-clip: content-box;
    background-color: yellow;
}
Copy the code

Effect display: Only the content area has the background color.

Range of the border

The box – shadow shadow

Add a shadow to the element

grammar

The location of the shadow box - shodow: level Location of the vertical shadow degree of fuzzy shadow size color inner shadow | outside the shadowCopy the code

.box{
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px auto;
    box-shadow: 20px 30px 50px 20px #008B8B;
}
Copy the code

Effect display:

Border – radius rounded corners

Add a rounded border to the element

border-radius: 10px 20px 30px 40px;
Copy the code

The order of the four values for each radius is: top left, top right, bottom right, bottom left

Effect:

Border-image Border image

border-image-source:url(' ');// Used to specify the position of the image to draw the border
border-image-slice:10; // The image boundary is offset inwardBorder - image - repeat, repeat, repeat) | round (covered)Copy the code

/* Border image Settings */
border-image-source: url(images/border-img.jpeg);
/* The image boundary is offset inward */
border-image-slice: 20;
/ * * / paved
border-image-repeat: round;
/ * repeat * /
border-image-repeat: repeat;
Copy the code

Effect:

Css3 text effect

Text-shadow Indicates the text shadow

Grammar:

text-shadow: h-shadow v-shadow blur(optional)color(optional).Copy the code

h1{
    text-shadow: 2px 2px #ff0000;
}
Copy the code

How does text-overflow display overflow content

Grammar:

text-overflow:clip| (pruning text)ellipsis(beyond ellipsis display)Copy the code

How to display the following effect:

First, make the text line free, then hide the overflow, and finally set the ellipsis

p{
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid red;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
Copy the code

Selectors for new features

Property selector

Select all elements with class attributes to set styles

[class]{
    color: red;
}
Copy the code

Style all elements with class= “active”

[class=active]{
    border: 1px solid # 000;
}
Copy the code

Input, in particular, can be easily selected through the property selector

input[type='submit']{}input[type='file']{}...Copy the code

Pseudo-class and pseudo-element selectors

A :link{} has not been visited a:visited{} after visiting a:hover{} a:active{} mouse button 2. Pseudo-element selector ::after{content:'hello world'} ::before{content:"hello"}Copy the code

Other selectors

:first-child{} Last-child {} Nth-child (n){} Currently specified element: nth-Child (2n){} Even :nth-child(2n-1){} Odd :nth-child(xn+1){} Select the element every x-1 lineCopy the code

New feature color gradient

Css3 gradients allow for smooth transitions between two or more specified colors. Previously the color gradient is shown through the image. However, by using CSS3 gradients, you can reduce download time and broadband usage. In addition, elements with a gradient look better when zoomed in. Because gradients are created by the browser.

Linear gradient

Grammar:

background: liner-gradient(Direction, color1And the color2,...). ;Copy the code

Linear Gradient – Top down (default)

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 */
Copy the code

Linear gradient – from left to right

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6-15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
Copy the code

Linear gradient – diagonal

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6-15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
Copy the code

Using the Angle

To do more with the direction of the gradient, you can define an Angle

The Angle is the Angle between the horizontal line and the gradient line, calculated counterclockwise. In other words, 0DEg will create a gradient from bottom to top and 90deg will create a gradient from left to right.

background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6-15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
Copy the code

Repeated linear gradients

/* Safari 5.1-6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1-12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6-15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
Copy the code

Radial gradient

The radial gradient is defined by its center.

To create a radial gradient, you must also define at least two color nodes. Color nodes are the colors that you want to make smooth transitions. You can also specify the center of the gradient, the shape (round or oval), and the size. By default, the center of the gradient is center, the shape of the gradient is ellipse, and the size of the gradient is apapse-corner.

Grammar:

background:radial-gradient(Center, shape, size, starting color,.... , the final color);Copy the code

Evenly distributed colors (default)

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 */
Copy the code

Uneven distribution

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6-15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
Copy the code

Set the shape

The current shape can be defined by the first argument being circle or Ellipse. Ellipse is the default value.

background: -webkit-radial-gradient(circle, red, yellow, black); /* Safari 5.1-6.0 */
background: -o-radial-gradient(circle, red, yellow, black); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(circle, red, yellow, black); /* Firefox 3.6-15 */
background: radial-gradient(circle, red, yellow, black 50%); /* Standard syntax */
Copy the code

Repeated radial gradient

/* Safari 5.1-6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6-12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6-15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Standard syntax */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
Copy the code

The 2 d transformation

Css3 quasi transform can move, scale, rotate, stretch, or stretch elements

First we need to set the transform property to the element

Grammar:

transform: move | scale | | tensile rotationCopy the code

The translate () method

This method moves from the current element based on the parameters given for the x – and Y-axis positions.

transform:translate(30px.20px);
-ms-transform: translate(30px.20px);
-webkit-transform: translate(30px.20px);
Copy the code

Move 30px in the opposite direction and 20px in the opposite direction

The rotate () method

The rotate() method, which rotates the element clockwise at a given degree. Negative values are allowed, so the element rotates counterclockwise.

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
Copy the code

Represents 30 degrees clockwise rotation

Scale () method

To increase or decrease an element. Depends on the method’s first argument (width) and second argument (height)

Grammar:

transform:scale(2.3);
Copy the code

Scale (2,3) transforms the width to twice its original size and the height to three times its original size.

Skew () method

Grammar:

transform: skew(X-axis Angle, Y-axis Angle);Copy the code

transform: skew(30deg.20deg);
-ms-transform: skew(30deg.20deg); /* IE 9 */
-webkit-transform: skew(30deg.20deg); /* Safari and Chrome */
Copy the code

Tilt 20 degrees and 30 degrees along the x and y axes

3 d conversion

Css3 allows elements to be formatted using 3D transformations.

Convert properties

perspective

Before setting the 3D effect, the parent element is given the Perspective attribute, which is usually between 600 and 1000. To see the 3D effect. This property is usually used with the Perspective-Origin property to change the position of the bottom of the 3D element.

perspective:1000px;
Copy the code

perspective-origin

The x and y axes on which 3D elements are defined. This property allows you to change the bottom position of a 3D element.

perspective-origin:50% 50%;
Copy the code

transform-style

Specifies how nested elements are rendered in three dimensions.

Note: To use this property, you must first use the transform property

transform-style: flat|preserve-3d
Copy the code

• Flat: all child elements are rendered in a 2D plane
• Preserve-3d: Indicates that all child elements are rendered in 3d space

3D conversion method

translateX(x)	Define the 3D transformation, using only the values for the X-axis.
translateY(y)	Define the 3D transformation using only the values for the Y-axis.
translateZ(z)	Define the 3D transformation using only the values used for the Z-axis.
scale3d(x.y.z)	Define the 3D zoom transformation.
scaleX(x)	Define a 3D scale transformation by giving an X-axis value.
scaleY(y)	Define a 3D scale transformation by giving a value for the Y axis.
scaleZ(z)	Define a 3D zoom transform by giving a z-axis value.
rotate3d(x.y.z.angle)	Define 3D rotation.
rotateX(angle)	Defines a 3D rotation along the X axis.
rotateY(angle)	Defines 3D rotation along the Y-axis.
rotateZ(angle)	Defines a 3D rotation along the Z axis

Example:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father {
				width: 1000px;
				height: 1000px;
				border: 1px solid # 000000;
				/* Define perspective */
				-webkit-perspective: 1000px;
				perspective-origin: 50% 50%;
                /* Display in 3D space */
				transform-style: preserve-3d;
				margin: 0 auto;
				position: relative;
			}

			.box {
				width: 300px;
				height: 300px;
				background-color: rgba(0.0.0.0.5);
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -150px;
				margin-top: -150px;
			}

			.box:nth-child(1) {
				-webkit-transform: translateZ(100px);
			}

			.box:nth-child(2) {
				-webkit-transform: rotateX(180deg) translateZ(100px);
			}

			.box:nth-child(3) {
				-webkit-transform: rotateX(-90deg) translateZ(100px);
			}

			.box:nth-child(4) {
				-webkit-transform: rotateX(90deg) translateZ(100px);
			}

			.box:nth-child(5) {
				-webkit-transform: rotateY(-90deg) translateZ(100px);
			}

			.box:nth-child(6) {
				-webkit-transform: rotateY(90deg) translateZ(100px);
			}
			</style>
	</head>
	<body>
		<div class="father">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>

	</body>
</html>


Copy the code

Effect display:

Transitions to new features

In CSS3, you can change from one style to another to add an effect without using Flash animation or JavaScript.

Transition properties

attribute	describe
transition	Shorthand property, used to set four transition properties in a property
transition-property	Specifies the name of the CSS property that applies the transition.
transiton-duration	The transition time is 0 by default
transition-timing-function	A time curve specifying transition effects. The default is ease: slow > fast > slow, ease-in: slow to start, ease-out: slow > fast > slow, ease-in-out: slow > fast > slow, linear: constant
transition-delay	Delay execution after a few seconds. The default is 0

Set multiple values

div{
    transition: width 2s,height 2s, transform 2s;
}
Copy the code

Animations for new features

In CSS3, we can create animations, which can replace many web animated images, such as Flash images and JS

@keyframes

To create cSS3 animations, you must know the @keyframes rule. The rule is to create an animation. The rule specifies a CSS style and how the animation starts and ends

@keyframes change{
    from{
        background-color: red;
    }
    to{
        background-color: green; }}Copy the code

Once the rule is defined, bind it to a selector, otherwise the animation will have no effect.

animation

.box{
    width: 200px;
    height: 200px;
    animation: change 3s;
    background-color: green;
}
Copy the code

You can specify the percentage of events that change occurs. From and to are the same thing as 0% and 100%. 0% is the beginning of the animation, 100% is the completion of the animation.

@keyframes change
{
    0%   {background: red; }25%  {background: yellow; }50%  {background: blue; }100% {background: green;}
}
Copy the code

Css3 animation properties

attribute	describe
@keyframes	Provisions of the animation
animation	Shorthand properties for all animation properties
animation-name	Specifies the name of the @keyframes animation
animation-duration	Specifies when the animation should be executed. The default is 0
animation-timeing-function	Specifies the speed curve of the animation. Same as transition-timing-function
animation-delay	Delay animation execution by a few seconds
animation-iteration-count	Specifies the number of times an animation is played. The default is 1. Usually, the value is “infinite” : forever
animation-direction	Specifies whether the animation is played backwards in the next cycle. normal|reverse

CSS3d animation album

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father {
				width: 200px;
				height: 200px;
				/* -webkit-perspective: 1000px; * /
				position: relative;
				margin: 300px auto;
				-webkit-transform-style: preserve-3d;
				-webkit-transform: rotateX(13deg);
				-webkit-animation: move 5s linear infinite;
			}

			.father .box {
				width: 200px;
				height: 200px;
				/* background-color: #000000; * /
				border: 1px solid # 666;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -100px;
				opacity: 0.5;
				-webkit-transition: all 3s ease;
			}

			Before / * * /
			.box:nth-child(1) {
				-webkit-transform: translateZ(100px);
			}

			/* 后 */
			.box:nth-child(2) {
				-webkit-transform: rotateX(180deg) translateZ(100px);
			}

			/* 下 */
			.box:nth-child(3) {
				-webkit-transform: rotateX(-90deg) translateZ(100px);
			}

			/* 上 */
			.box:nth-child(4) {
				-webkit-transform: rotateX(90deg) translateZ(100px);
			}

			/ * * / left
			.box:nth-child(5) {
				-webkit-transform: rotateY(-90deg) translateZ(100px);
			}

			/ * * / right
			.box:nth-child(6) {
				-webkit-transform: rotateY(90deg) translateZ(100px);
			}



			.box:nth-child(1) {
				background: url(./images/1.png) no-repeat 0 0;
				/* -webkit-transform: translateZ(100px); * /
			}

			.box:nth-child(2) {
				background: url(./images/2.png) no-repeat 0 0;

			}

			.box:nth-child(3) {
				background: url(./images/3.png) no-repeat 0 0;

			}

			.box:nth-child(4) {
				background: url(./images/4.png) no-repeat 0 0;

			}

			.box:nth-child(5) {
				background: url(./images/5.png) no-repeat 0 0;

			}

			.box:nth-child(6) {
				background: url(./images/6.png) no-repeat 0 0;

			}

			.father:hover .box:nth-child(1) {
				-webkit-transform: translateZ(300px);
				width: 400px;
				height: 400px;
				opacity: 0.8;
				left: -100px;
				top: -50px;
			}

			.father:hover .box:nth-child(2) {
				-webkit-transform: rotateX(180deg) translateZ(300px);
				width: 400px;
				height: 400px;
				opacity: 0.8;
				left: -100px;
				top: -50px;
			}

			.father:hover .box:nth-child(3) {
				-webkit-transform: rotateX(-90deg) translateZ(300px);
				width: 400px;
				height: 400px;
				opacity: 0.8;
				left: -100px;
				top: -50px;
			}

			.father:hover .box:nth-child(4) {
				-webkit-transform: rotateX(90deg) translateZ(300px);
				width: 400px;
				height: 400px;
				opacity: 0.8;
				left: -100px;
				top: -50px;
			}

			.father:hover .box:nth-child(5) {
				-webkit-transform: rotateY(-90deg) translateZ(300px);
				width: 400px;
				height: 400px;
				opacity: 0.8;
				left: -100px;
				top: -50px;
			}

			.father:hover .box:nth-child(6) {
				-webkit-transform: rotateY(90deg) translateZ(300px);
				width: 400px;
				height: 400px;
				opacity: 0.8;
				left: -100px;
				top: -50px;
			}

			@keyframes move {
				from {
					transform: rotateX(13deg) rotateY(0deg);
				}

				to {
					transform: rotateX(13deg) rotateY(360deg); }}</style>
	</head>
	<body>
		<div class="father">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>
	</body>
</html>

Copy the code

Effect display: