一篇文章让你全面熟悉CSS3常用API总结(推荐必看，开发必用)

前言

大家好，本文章是介绍css3新特性之样式、选择器、颜色渐变、2D转换、3D转换等API用法。这些用法也是我们开发中必备的一些基础，大家不要轻视它们。

希望本文章的老铁，留下你们的关注和赞，后续掘金主也会不断更新出新的文章。

本文章有对应的讲解视频 《CSS3精讲》，记得关注-点赞-收藏哦

CSS3简介

CSS3是层叠样式表语言的最新版本。它带来许多期待已久的新特性，另外CSS3带来的新特性被分为”模块“。例如新的选择器、圆角、阴影、渐变、过渡、动画。以及新的布局方式

新特性之样式

css3之背景

1.background-image

通过此属性添加背景图片。不同的背景图像和图像用逗号隔开，第一个设置的永远显示在最顶端

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

可以给不同的图片设置多个不同的属性

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

2.background-size

该属性指定背景图像的大小。CSS3之前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片的大小，指定的大小是父元素的宽度和高度的百分比的大小

语法：

background-size: cover|contain;

• cover 将背景图片按照原来的缩放比，将整个容器铺满
• contain 将背景图片按照原来的缩放比，完成显示到容器中

背景图像完全填充内容区域

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

例子:设置大的背景图，并且随着拉伸浏览器背景图跟着等比例缩放

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

3.background-origin

该属性指定背景图像的位置区域

content-box,padding-box和border-box区域内可以放置背景图像。

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;
}

效果显示：

4.background-clip

指定绘图区域的背景

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

效果显示：会发现只有内容区域有背景色。

css3之边框

box-shadow 阴影

为元素添加阴影

语法

box-shodow: 水平阴影的位置 垂直阴影的位置 模糊程度 阴影大小 颜色 内阴影|外阴影

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

效果显示:

border-radius 圆角

给元素添加圆角的边框

border-radius: 10px 20px 30px 40px;

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角

效果：

border-image 边框图片

border-image-source:url('');//用于指定要勇于绘制边框的图像的位置
border-image-slice:10; //图像边界向内偏移
border-image-repeat: repeat(重复)|round(铺满) 

/* 边框图片设置 */
border-image-source: url(images/border-img.jpeg);
/* 图像边界向内偏移 */
border-image-slice: 20;
/* 铺满 */
border-image-repeat: round;
/* 重复 */
border-image-repeat: repeat;

效果：

css3之文本效果

text-shadow 文本阴影

语法：

text-shadow: h-shadow v-shadow blur(可选) color(可选);

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

text-overflow 如何显示溢出内容

语法:

text-overflow:clip(修剪文本)|ellipsis(超出显示省略符号)

如何显示如下效果：

首先先让文本不换行，然后超出部分隐藏掉，最后再设置省略号

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

新特性之选择器

属性选择器

选中所有带有class属性的元素设置样式

[class]{
    color: red;
}

选中class=“active“的所有元素设置样式

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

尤其是input，我们可以很方便的通过属性选择器选中

input[type='submit']{
    
}
input[type='file']{
    
}
....

伪类和伪元素选择器

1.a标签的爱恨准则
a:link{} 没有被访问过
a:visited{} 访问过后
a:hover{} 鼠标悬停
a:active{} 鼠标摁住

2.伪元素选择器
::after{
    content:'hello world'
}
::before{
    content:"hello"
}

其它选择器

:first-child{} 第一个元素
:last-child{} 最后一个元素
:nth-child(n){} 当前指定的元素
:nth-child(2n){} 偶数
:nth-child(2n-1){} 奇数
:nth-child(xn+1){} 隔x-1行选中元素 

新特性之颜色渐变

css3渐变(gradients)可以让两个或多个指定颜色之间显示平稳的过渡。之前显示颜色渐变是通过图片。但是,通过使用css3渐变，你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好。因为渐变是由浏览器产生的。

线性渐变

语法:

background: liner-gradient(方向,颜色1,颜色2,....);

线性渐变-从上往下(默认)

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); /* 标准的语法 */

线性渐变-从左往右

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); /* 标准的语法 */

线性渐变-对角

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); /* 标准的语法 */

使用角度

在渐变的方向上做更多的操作，你可以定义一个角度

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

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); /* 标准的语法 */

重复的线性渐变

/* 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%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：

background:radial-gradient(center,形状 大小,开始的颜色,....,最后的颜色);

颜色均匀分布(默认)

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); /* 标准的语法 */

不均匀分布

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%); /* 标准的语法 */

设置形状

可以通过第一个参数是circle或ellipse来定义当前的形状。其中ellipse是默认值。

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%); /* 标准的语法 */

重复的径向渐变

/* 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%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);

2D转换

Css3 准换可以对元素进行移动、缩放、转动、拉长或拉伸

首先我们需要给元素设置transform属性

语法:

transform: 移动|缩放|转动|拉伸

translate()方法

该方法，根据x轴和y轴位置给定的参数，从当前元素移动。

transform:translate(30px,20px);
-ms-transform: translate(30px,20px);
-webkit-transform: translate(30px,20px);

水平反向移动30px,垂直方向移动20px,如果是负值表示反方向

rotate()方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

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

表示顺时针旋转30度

scale()方法

使元素增加或减小。取决于此方法的第一个参数(宽度)和第二个参数(高度)

语法:

transform:scale(2,3);

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

skew()方法

语法:

transform: skew(x轴角度,y轴角度);

transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

在x轴和y轴上倾斜20度和30度

3D转换

css3允许使用3D转换对元素进行格式化。

转换属性

perspective

在设置3D效果之前，要给父元素设置perspective属性，此值通常在600到1000之间。才能看出3D效果。通常该属性与perspective-origin属性一同使用，这样就能改变3D元素的地底部位置。

perspective:1000px;

perspective-origin

定义3D元素所基于的x轴和y轴。该属性允许改变3D元素的底部位置。

perspective-origin:50% 50%;

transform-style

指定嵌套元素是怎么样在三维空间中呈现。

注意：使用该属性必须先使用transform属性

transform-style: flat|preserve-3d

• flat: 表示所有子元素在2D平面呈现
• preserve-3d: 表示所有子元素在3D空间中呈现

3D转换方法

translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father {
				width: 1000px;
				height: 1000px;
				border: 1px solid #000000;
				/*定义透视*/
				-webkit-perspective: 1000px;
				perspective-origin: 50% 50%;
                /*在3D空间中显示*/
				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>

效果显示:

新特性之过渡

在css3中，为了添加某个效果可以从一种样式转变到另一个样式，无需使用flash动画或JavaScript。

过渡属性 transition

属性	描述
transition	简写属性，用于一个属性中设置四个过渡属性
transition-property	规定应用过渡的css属性的名称。
transiton-duration	过渡的时间，默认是0
transition-timing-function	规定过渡效果的时间曲线。默认是ease:慢->快->慢，ease-in:慢速开始，ease-out：慢速结束，ease-in-out:慢->快->慢，linear:匀速
transition-delay	延迟几秒之后执行。默认是0

设置多个值

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

新特性之动画

在css3中，我们可以创建动画，它可以取代许多网页动画图像，比如Flash图像和js

@keyframes

要创建css3的动画，你必须知道@keyframes规则。它的规则是创建动画。规则内指定一个css样式和动画开始以及结束的样式

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

定义好规则之后，把它绑定到一个选择器，否则动画不会有任何效果。

animation

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

你可以用百分比规定变化发生的事件。from和to，等同于0%和100%。0%是动画的开始，100%是动画的完成。

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

css3的动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画执行的时间。默认是0
animation-timeing-function	规定动画的速度曲线。跟transition-timing-function值一样
animation-delay	延迟几秒执行动画
animation-iteration-count	规定动画被播放的次数。默认是1。通常取值infinite:永远
animation-direction	规定动画是否在下一周期逆向地播放。normal|reverse

CSS3d实现动画相册

<!DOCTYPE html>
<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;
			}

			/* 前 */
			.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);
			}



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

效果展示: