css3新特性

作者: 1024前端喵 | 来源:发表于2018-09-14 16:10 被阅读0次

css3用的已经手到擒来，我觉得是前端最简单的一个学习部分了，但是其中让我有些混乱的是css3，虽然偶尔也会用css3的方法，但是没有系统的整理过，分不清哪些是新增的特性，所以打算自己总结一篇关于css3用法的文章巩固一下，从而更加清晰的理解与运用。内容较多的知识点会另起文章。

一.边框

1.圆角

 border-radius:10px;

2.盒阴影

box-shadow: h-shadow v-shadow blur spread color inset;
水平阴影，垂直阴影，模糊距离，阴影的尺寸，颜色，外部阴影改为内部阴影

box-shadow: 10px 10px 5px #888888;

3.边界图片

border-image 属性用于设置图片的边框，Internet Explorer 不支持 border-image 属性

<style> 
div
{
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}

#round
{
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;
}

#stretch
{
    -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 stretch; /* Opera */
    border-image:url(border.png) 30 30 stretch;
}
</style>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

二.渐变

1.线性渐变 - 从上到下（默认情况下）

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

2.线性渐变 - 从左到右

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

3.线性渐变 - 对角

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

4.径向渐变 - 颜色结点均匀分布（默认情况下）

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

5.径向渐变 - 颜色结点不均匀分布

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

6.径向渐变 - 圆形

background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */

7.径向渐变 - 重复的径向渐变

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */

二.文本效果

1.文本阴影

水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

text-shadow: 5px 5px 5px #FF0000;

2.单词太长，自动换行

word-wrap:break-word;

三.字体

@font-face
{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf')
        ,url('Sansation_Light.eot'); /* IE9 */
}

div
{
    font-family:myFirstFont;
}

三.2D转换

1.元素位置移动，translate() 方法

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */

2.顺时针旋转，负数为逆时针，rotate() 方法

rotate值（30deg）元素顺时针旋转30度。

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

3.元素增加或减少的大小，scale() 方法

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

-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

4.X轴和Y轴倾斜，skew() 方法

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

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

5.矩阵，matrix() 方法

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
参考网站：https://blog.csdn.net/hehajoker/article/details/52602825

四.3D转换（opera浏览器不支持）

1.围绕其在一个给定度数X轴旋转的元素，rotateX() 方法

transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */

2.围绕其在一个给定度数Y轴旋转的元素，rotateY() 方法

transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 与 Chrome */

五.过渡

1.单项改变

指定要添加效果的CSS属性和指定效果的持续时间。

div{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

div:hover{
    width:300px;
}

2.多项改变

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

3.各个属性与简写

各个属性

transition-property:width; 规定应用过渡的 CSS 属性的名称
transition-duration:1s; 花费的时间
transition-timing-function:linear; 过渡效果时间曲线
transition-delay:2s; 何时开始

简写

transition: width 1s linear 2s;
/* Safari */
-webkit-transition: width 1s linear 2s;

六.动画

单次改变

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;  /*规定动画的名称和规定动画的时长*/
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst{   /* Safari and Chrome */
    from {background:red;}
    to {background:yellow;}
}

多次改变

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
}

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

@-moz-keyframes myfirst {  /* Firefox */
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-webkit-keyframes myfirst {  /* Safari and Chrome */
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-o-keyframes myfirst{   /* Opera */
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

改变背景色和位置

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst {  /* Safari and Chrome */
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

animation-name: myfirst; 动画的名称
animation-duration: 5s; 动画完成一个周期所花费的秒或毫秒
animation-timing-function: linear; 动画的速度曲线
animation-fill-mode:forwards; 物体动画地从一个地方移动到另一个地方，并让它停留在那里
animation-delay: 2s; 动画何时开始
animation-iteration-count: infinite; 动画被播放的次数，infinite为无限次
animation-direction: alternate; 动画是否在下一周期逆向地播放
animation-play-state: running; 动画是否正在运行或暂停

简写

animation: myfirst 5s linear 2s infinite alternate;
/* Safari 与 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;

七.多列

1.创建多列

-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;

2.多列中列与列间的间隙

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

3.列边框

column-count:3; 分几列
column-gap:40px; 间距
column-rule-style:dotted; 线样式
column-rule-width: 1px; 线宽度
column-rule-color: lightblue; 线颜色

column-count:3;
column-gap:40px;
column-rule-style:dotted;

/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:dotted;

/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:dotted;

简写

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;

4.指定元素跨越多少列

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

5.指定列的宽度

-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;

八.框大小

加上box-sizing解决padding后宽度和高度变化的问题

box-sizing: border-box;

九.弹性盒子

参考：https://blog.csdn.net/u014607184/article/details/52650446

外面容器

1.flex-direction属性决定主轴的方向（即项目的排列方向）

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-direction: row | row-reverse | column | column-reverse;

2.flex-wrap，如果一条轴线排不下，如何换行。

分别表示不换行、换行以及反转换行

flex-wrap: nowrap | wrap | wrap-reverse;

3.flex-flow，属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

4.justify-content，定义了项目在主轴上（即相当于X轴）的对齐方式

分别表示：左对齐、右对齐、居中、两端对齐、每个项目两侧的间隔相等

justify-content: flex-start | flex-end | center | space-between | space-around;

5.align-items，定义项目在交叉轴上（即Y轴上）如何对齐

分别表示：上对齐、下对齐、居中对齐、项目的第一行文字的基线对齐、如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）

align-items: flex-start | flex-end | center | baseline | stretch

6.align-content，定义了多根轴线的对齐方式

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

里面成员

1.order，定义项目的排列顺序。数值越小，排列越靠前，默认为0

2.flex-grow，定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果一个项目的flex-grow属性为2，另一个项目都为1，则前者占据的剩余空间将比后一项多一倍

flex-grow: <number>; /* default 0 */

3.flex-shrink，定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-shrink: <number>; /* default 1 */

4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。类似于设置了width属性

参考网站：http://caibaojian.com/demo/flexbox/flex-basis.html

5.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

参考网站：https://blog.csdn.net/aliven1/article/details/78853725

6.align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

六个取值中，除了auto，其他值与align-items属性完全一致

align-self: auto | flex-start | flex-end | center | baseline | stretch;

十.多媒体查询

以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 "Email: "

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}