序言
他们好，本该文是如是说css3新优点之式样、示例、色调蓝紫色、2D切换、3D切换等API用语。那些用语也是他们合作开发中必不可少的许多此基础，他们千万别鄙视它。
CSS3概要
CSS3是竹节式样表词汇的新一代版。它增添很多翘首以盼的新优点，除此之外CSS3增添的新优点被分成”组件“。比如捷伊示例、梯形、阴霾、蓝紫色、过渡阶段、动画电影。和捷伊产业布局形式
新优点之式样
css3之大背景
1.background-image
透过此属性加进RICOH。相同的大背景影像和影像用双引号分隔，第二个增设的总有一天表明在最顶部
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中能选定RICOH的大小不一，选定的大小不一是父原素的长度和度的比率的大小不一
句法：
background-size: cover|contain;
cover 将RICOH按照原本的翻转比，将整座罐子挂满contain 将RICOH依照原本的翻转比，顺利完成表明到罐子中大背景影像全然充填文本地区
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;
}
例子:增设大的大背景图，并且随着拉伸浏览器大背景图跟着等比例翻转
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切换方法
示例：
<!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
增设数个值
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的动画电影特性
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>
效果展示:
作者：前端合作开发小马哥
链接：https://juejin.im/post/6892926788641816589
