CSS3 新特性

时间 2019-12-31

标签 css3 css 特性栏目 CSS 繁體版

原文原文链接

CSS3新特性样式

背景

background-origin

咱们知道盒子的大小有三部分组成：border, padding, content，当咱们设置背景图片时，图片是会以左上角对齐，可是是以border的左上角对齐仍是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的，它有三个可选值css

border-box

padding-box

content-box

其中意思没必要解释就能够明白。若是不进行设置的话，默认是padding-box，即以padding的左上角为原点。html

background-clip

该属性是用来设置背景(背景图片、背景颜色)延伸的范围，有4个值可选css3

border-box：背景延伸至边框外沿(可是在边框下层)

padding-box：背景延伸至内边距(padding)外沿,不会绘制到边框处

content-box：背景被裁剪至内容区(content box)外沿

text：背景被裁剪成文字的前景色

具体能够参考网站background-clip，这里演示一下上面的效果浏览器

background-size

background-size用以设置背景图片大小。单张图片的背景大小可使用如下三种方法中的一种来规定：网络

使用关键词 contain

使用关键词 cover

设定宽度和高度值

设定指定的宽度和高度值想必不用多加介绍。contain和cover会等比例的缩放图片，以使得图片可以最大的被完整包含或者最小的覆盖背景区。ide

若是背景区(由background-origin决定)的宽高比和图片的宽高比是同样的，那么cover和contain的结果是同样的，会彻底的覆盖背景区并完整的显示。函数

边框

边框圆角

使用border-radius能够设置边框为圆角的，border-radius的值就是圆角边框的半径。工具

width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 20px;
background-color: pink;
复制代码

与padding同样，取不一样个数的值，表明设置不一样地方的圆角半径，如布局

取值个数	设置
1个，如border-radius: 20px	设置四个角的圆角半径都为20px
2个，如border-radius: 10px 20px	设置左上角和右下角这条对角线为10px,另外一条对角线为20px
3个，如border-radius: 10px 20px 30px	设置左上角为10px,右上角和左下角这条对角线为20px,右下角为30px
4个，如border-radius: 5px 10px 15px 20px	从左上角开始设置，按顺时针来，即左上角为5px,右上角为10px, ...

由第一张图，咱们发现半径也分为水平半径和垂直半径，这两个也能够分别设置，用/分开当作两组，第一个用来设置水平半径，第二个设置垂直半径，如post

width: 100px;
height: 120px;
margin: 0 auto;
border-radius: 50px / 60px; 
background-color: pink;
复制代码

咱们设置四个角的水平半径为50px,四个角的水平半径为60px,获得效果以下

若是不分开设置，则默认水平半径和垂直半径是相同的。

若是想要更加详细的了解，这里推荐一篇阮一峰的网络日志CSS3圆角边框。

边框图片

找到一篇写的很好的博文border-image的正确用法，因此这里就不本身写了。

阴影

盒子阴影

为了知道什么是盒子阴影，观看以下效果

这里选取了小米的作法，因为设置阴影的颜色比较淡，因此可能比较难看出来。

用以设置盒子阴影的属性是box-shadow,它的值比较多，须要设置的值以下，

水平阴影

垂直阴影

模糊距离(虚实)

阴影尺寸(影子大小)

阴影颜色

内/外阴影(这个我也不懂，不作介绍)

其中水平阴影h-shadow和垂直阴影v-shadow是必须设置的。

为了观看设置这些值的效果，咱们首先建立一个盒子

width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 100px auto;
复制代码

为盒子添加阴影

box-shadow: 1px 1px 1px 1px red;
复制代码

水平阴影大小的影响(正值，阴影向右移动，负值，阴影向左移动)

垂直阴影大小的影响(正值，阴影向下移动，负值，阴影向上移动)

模糊距离大小的影响

阴影尺寸大小的影响

文本阴影

使用text-shadow来设置文本阴影。使用与box-shadow差很少，具体能够参照text-shadow。

CSS3选择器

CSS3新增了许多的选择器，为咱们选择元素提供了更加灵活的选择。

属性选择器

[attr]：选择包含attr属性的标签

[attr=value]：选择attr属性值为value的标签

[attr^=value]：选择attr属性值以value开头的标签

[attr*=value]：选择attr属性值包含value的标签

[attr$=value]：选择attr属性值以value的标签

如

div[class] {
    /* 会选择包含class属性的div标签 */
}
div[class="active"] {
    /* 会选择class属性值为active的div标签 */
}
div[class^="header"] {
    /* 会选择class属性以header开头的div标签 */
}

... ...
复制代码

结构伪类选择器

E:first-child

E:last-child

E:nth-child(n)

E:nth-last-child(n)

E:first-of-type

E:last-of-type

E:nth-of-type(n)

E:nth-last-of-type(n)

上面的选择器是比较常见的结构伪类选择器，下面具体讲解其表达的意思。

E:first-child指的是，选择E，这个E知足的条件是：它是其父元素第一个子元素。听起来有点绕，来看一个例子

<div>
    <span></span>
    <h1></h1>
    <p></p>
</div>
<div>
    <i></i>
    <span></span>
    <h1></h1>
    <p></p>
</div>
复制代码

span:first-child {
    /* 它会选择span，条件是这个span必须是它父元素的第一个子元素 */
}
复制代码

因为第一个div里面的span是其父元素(第一个div)的第一个子元素，因此第一个div里面的span会被选中。而第二个div里面的span不是其父元素(第二个div)的第一个子元素，因此这个span不会被选中。

E:last-child的与E:first-child类似，不过第一个改成最后一个。

E:nth-child(n)指的是选择E，E须要知足条件，是其父元素的第n个元素(n是从1开始的)，E:first-child就至关因而E:nth-child(1)。E:nth-child(n)中这个"n"除了能够是具体的数字之外，还能够是odd和even，表示选择全部的E，这些E是其父元素的第奇数或第偶数个。除此以外"n"还能够是表达式，如2n+1, 3n(n从1开始)。

而E:nth-last-child(n)则是倒着数的，用法同E:nth-child(n)类似，这里很少介绍。

E:first-of-type与E:first-child不一样，其意思是选择器父元素下的第一个E元素。仍是以上面两个div为例

<div>
    <span></span>
    <h1></h1>
    <p></p>
</div>
<div>
    <i></i>
    <span></span>
    <h1></h1>
    <p></p>
</div>
复制代码

span:first-of-type {
    /* 选择span父元素下的第一个span元素 */
}
复制代码

这个时候两个span均可以被选择到，first-of-type至关于只是将E的父元素所包含的E所有抽离出来，而后进行选择。如今咱们将div包含的span所有抽离出来，至关于

<div>
    <span></span>
</div>
<div>
    <span></span>
</div>
复制代码

而后选择第一个span，因此这两个span均可以被选择到。其他的first-last-type, nth-of-type(n), nth-last-of-type同上面介绍的last-child, ...类似，其不一样之处在fitst-child与first-of-type处已详细阐述。

CSS3颜色渐变

颜色渐变是指在两个颜色之间平稳的过渡。以往咱们若是但愿有颜色渐变的效果，会在绘图工具(如PS)设计出但愿的效果，而后做为图片来实现这种效果。如今经过浏览器能够渲染而成，这样能够减小下载的时间和带宽的使用，以及在放大时看起来效果更好，由于这是浏览器自动生成的。

线性渐变

线性渐变指的是颜色在一条线上平稳的变化，为了实现线性渐变，咱们要规定线的方向，起点颜色和终止颜色。它的语法为

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
复制代码

如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style> .box { width:100%; height:100px; background-image: linear-gradient(to right, red, green); } </style>

</head>
<body>
    <div class="box">

    </div>
</body>
</html>
复制代码

效果为

其中

linear-gradient(to right, red, green);
复制代码

其中第一个参数to right是用来设置方向的，设置方向的值有

to right：从左往右

to left：从右往左

to top：从下往上

to bottom：从上往下，默认值

to right bottom：从左上角往右下角

... ...

除了能够设置这些值以外，还能够设置角度，如

linear-gradient(0deg, red, green);
复制代码

其中角度所表明的的方向以下所示

即0deg表明的方向是从下往上。

除此以外，除了设置起点颜色和终点颜色以外，还能够在之间设置多个颜色节点，以下面设置了一个彩虹渐变色

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
复制代码

除此以外，还能够在颜色后面加上数值或者百分比，如

background-image: linear-gradient(to right, red, blue 10%, violet);
复制代码

blue 10%表示blue颜色节点在该线性方向10%的位置，因此从0%-10%是红色到蓝色的渐变，10%-100%是蓝色到紫色的渐变。

接下来介绍渐变的最后一个特性：渐变重复。看下面一个例子

/* 设置为23%而没有设置为能被100%整除的数 就是想看一下这种状况是怎么处理的 */
repeating-linear-gradient(to right, red,yellow 23%);
复制代码

上面的意思是从0%-23%实现红色到黄色的渐变，而后重复直至100%。

径向渐变

径向渐变是指以某点为圆心，向外进行颜色渐变。因此为了实现径向渐变，咱们要规定圆心的位置和起点颜色和终点颜色。径向渐变的语法为

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
复制代码

其中shape为渐变的形状，有两种取值

circle(圆形)

ellipse(椭圆, 默认值)

size是指100%所表明的的长度，有四种取值

closest-side(离最近的边的距离)

farthest-side(离最远的边的距离)

cloest-corner(离最近的角的距离)

farthest-corber(离最远的角的距离，默认值)

position是指圆心的位置，默认为center，即中心位置，也能够经过at 100px 100px形式进行设置，左上角的坐标的为(0px, 0px)。

.box {
    width:400px;
    height:200px;
    /* 设置size大小为离最近的边的距离 */
    background-image: repeating-radial-gradient(circle closest-side at 200px 100px, red, red 10%,green 12.5%, green 25%)
}
复制代码

可见离最近的边有4个完整的重复。

/* 设置size大小为离最远的边的距离 */
background-image: repeating-radial-gradient(circle farthest-side at 200px 100px, red, red 10%,green 12.5%, green 25%)
复制代码

可见离最远的边有4个完整的重复。

/*为了使最远的角和最近的角的距离不一样 position不能设置在中心 */
/* 设置size大小为离最近的角的距离 */
background-image: repeating-radial-gradient(circle closest-corner at 100px 100px, red, red 10%,green 12.5%, green 25%)
复制代码

可见离最近的角有4个完整的重复。

/* 设置size大小为离最远的角的距离 */
background-image: repeating-radial-gradient(circle farthest-corner at 100px 100px, red, red 10%,green 12.5%, green 25%)
复制代码

可见离最远的角有4个完整的重复。

CSS3 2D变换

CSS3 2D变换包括对元素进行移动、缩放、转动、拉长或拉伸。

translate()：对元素进行进行移动
- translate(100px)：对元素向x正方向移动100px(负值向负方向移动)

scale()：对元素进行缩放

scale(n)：对元素进行缩放，传入的参数大于1，进行放大，小于1，进行缩小

scale(x, y)：第一个参数对宽度进行缩放，第二个值对高度进行缩放

rotate()：围绕中心旋转，正值顺时针，负值逆时针

transform-origin：能够改变旋转的中心，如

/* 围绕左上角进行旋转 */
transform-origin: left top;
复制代码

/* 围绕中心旋转 为默认值 */
transform-origin: 50% 50%;
复制代码

skew()：对元素进行倾斜

skew(angle)：向x轴负方向倾斜angle(负值沿正方向)

skew(anglex, angley)：第一个参数对x方向，第二个参数对y方向

除了可使用上述属性进行设置，还可使用translateX(), translateY()等进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style> div { width: 100px; height: 100px; } /* 为每一个div设置颜色 */ .box1 { background-color: red; } .box2 { background-color: aqua; } .box3 { background-color: chocolate; } .box4 { background-color: darkcyan; } /* 为每一个盒子设置不一样的2D变换效果 */ .box1:hover { transform: translateX(100px); } .box2:hover { transform: scale(0.5); } .box3:hover { transform: rotate(-30deg); } .box4:hover { transform: skew(30deg); } </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>  
</body>
</html>
复制代码

CSS3 3D

3D变换的操做同2D相同，只是多了一个对Z轴的操做，如translateZ()，而rotate也分为rotateX(), rotateY(), rotateZ()，分别表示绕着X轴，Y轴，Z轴旋转。2D变换的rotate()其实就至关于rotateZ()。

CSS3动画

transition

首先咱们来看一个例子

.box {
    height: 100px;
    width: 100px;
    background-color: black;
}
.box:hover {
    transform: translateX(600px);
}
复制代码

当咱们把鼠标放在盒子上时，盒子向右移动了600px，可是这个过程是在瞬间完成的，十分的突兀，咱们但愿是缓慢由一个转态转变到另外一个状态的，这种效果又叫作过渡，这时就须要用到transition属性了。

为某个元素添加过渡效果，必须规定两项内容：

transition-property：指定要添加效果的CSS属性

例如上面就要为transform添加过渡效果，因此就能够写为

/* 值能够为all 表示为全部的属性添加过渡效果 默认值为all*/
transition-property: transform;
复制代码

transition-duration：添加过渡的总时间

/* 默认值为0s */
transition-duration: 1s; /* 单位能够为s */
transition-duration: 100ms; /* 单位也能够为ms */
复制代码

除了上面必须设置的两个属性，还能够设置下面的属性

transition-timing-function：
时间函数，设置过渡的变化速度
- ease：开始和结束慢，中间快，默认值。

除了能够设置以上关键字，还能够设置steps()函数，语法以下：

steps(<integer>[,start | end]?)
复制代码

第一个参数传入一个整数值，steps步进函数将过渡时间划分红大小相等的时间时隔来运行，这个整数值就是分红的份数。第二个值是可选的，默认值为end。若是是start，则不保留开始值，若是是end，则保留开始值。

这里给出一个利用steps()函数作动画效果的例子。

transition-delay：延时时间，默认值为0s

animation

与transition同样，animation也有不少的属性

animation-name：动画名称

animation-duration：动画持续时间

animation-timing-function：动画时间函数

animation-delay：动画延迟时间

animation-iteration-count：动画执行次数，能够设置为一个整数，也能够设置为infinite，意思是无限循环

animation-direction：动画执行方向

animation-paly-state：动画播放状态

animation-fill-mode：动画填充模式

过渡是指在两个状态之间，而动画则是指在多个状态之间变化，这些状态咱们称之为关键帧，所以动画又称之为关键帧动画。使用动画首先要建立关键帧，而后使用animation-name去调用该动画，如

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 
     <style> .box { width: 100px; height: 100px; background-color: aqua; } .box:hover { animation-name: move; animation-duration: 1s; } /* 建立一个关键帧动画 动画名为move */ /* 调用时使用animation-name: move调用 */ @keyframes move { /* 第一个状态 0% 时的状态 可使用from代替 */ /* 这里的百分比是指 总时间 * 百分比 获得的某个时刻的状态*/ 0% { transform: translateX(0px); } 50% { transform: translateX(100px); } /* 100% 可使用 to 代替 */ 100% { transform: translateY(100px); } } </style>
 
 </head>
 <body>
    <div class="box">
         
    </div>
 </body>
 </html>
复制代码

咱们还能够设置动画的执行次数，修改上面的样式为

.box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    animation-name: move;
    animation-duration: 1s;
    /* 播放次数默认值为 1 */
    animation-iteration-count: infinite;
}
复制代码

咱们发现动画执行完毕后，盒子忽然就回到了原位置，这个过程有点突兀，咱们但愿这个过程也是慢慢过渡的，那么咱们能够设置animation-direction，animation-direction有四种取值

normal：默认值，正常播放

reverse：反向播放

alternate：若是动画次数在两次或两次以上，那么第偶数次为反向播放，就能够达到回到原位置时也有过渡的效果。若动画只播放一次，则和正向播放同样。

alternate-reverse：若动画只播放一次，则和反向播放同样。若播放两次以上，偶数次效果为正向播放

.box:hover {
   animation-name: move;
   animation-duration: 1s;
   animation-iteration-count: 2;
   animation-direction: alternate;
}
复制代码

animation-play-state用来设置动画的播放状态，有两种取值

running：默认值，动画运行

paused：动画暂停

将样式修改成

.box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    animation-name: move;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
         
.box:hover {
    /* 当鼠标放上去时 动画暂停 */
   animation-play-state: paused;
}
复制代码

animation-fill-mode用来定义动画开始帧以前和结束帧以后的动做，有如下四种取值

none：默认值。动画结束后，元素移动到初始状态(不必定0%的状态，是元素自身的属性值)

forwards：元素停在动画结束时的位置(不必定是100%的位置，有可能反向运动)

backwards：在animation-delay的时间内，元素马上移动到动画开始时(不必定是0%，有可能反向运动)的位置。若元素无animation-delay时，与none的效果相同

both：同时具备forwards和backwards

修改样式以下

.box {
   width: 100px;
   height: 100px;
   background-color: aqua;
}
         
.box:hover {
   animation-name: move;
   animation-duration: 1s;
   /* 动画结束后，停留在动画结束的位置 */
   animation-fill-mode: forwards;
}
复制代码

CSS3 flex布局

当一个父元素被设置为display:flex时，它就是弹性布局，子元素的float、clear和vertical-align属性将失效。此时咱们把父元素称之为container(容器)，把子元素称之为item(项目)。当父元素被设置为弹性布局后，对子元素有什么影响? 先来感觉一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style> .container { display: flex; width: 500px; height: 400px; background-color: crimson; } .item { width: 100px; height: 100px; background-color: aqua; position: relative; } /* 这个是为了演示方便 样式不重要 没必要细看 */ .item div{ width: 50%; height: 50%; position: absolute; /* 下面三行语句是为了设置居中对齐 */ top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: brown; /* 圆角边框 */ border-radius: 50%; /* 下面两行设置文字居中对齐 */ text-align: center; line-height: 50px; /* 设置字体样式 */ font-size: 30px; font-weight: 700; color: white; } </style>

</head>
<body>
   <div class="container">
        <div class="item"><div>1</div></div>
        <div class="item"><div>2</div></div>
        <div class="item"><div>3</div></div>
   </div>
</body>
</html>
复制代码

当父元素设置为flex布局后，其子元素item会在父元素container的主轴上排列。

这里又牵涉到新的概念，主轴(main axis)，flex容器的主轴默认为X轴，即从左向右，既然有主轴，那么就会有侧轴(cross axis)，默认的侧轴为Y轴，即从上往下。

container上的属性

直观的感觉了一下flex的效果，如今咱们来看看flex要设置哪些属性，首先设置在container的flex属性有

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

下面来一一介绍。

flex-direction是用来设置主轴的，它有如下四个值可选

row：默认值，主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

如今咱们分别修改container里面的样式

flex-direction: row-reverse;
复制代码

flex-direction: column;
复制代码

flex-direction: column-reverse;
复制代码

为了演示flex-wrap，咱们添加9个item(此时flex-direction为默认值row，除非特别声明，不然咱们在演示其一个flex属性时，会将其余flex属性设置为默认值)

<div class="container">
     <div class="item"><div>1</div></div>
     <div class="item"><div>2</div></div>
     <div class="item"><div>3</div></div>
     <div class="item"><div>4</div></div>
     <div class="item"><div>5</div></div>
     <div class="item"><div>6</div></div>
     <div class="item"><div>7</div></div>
     <div class="item"><div>8</div></div>
     <div class="item"><div>9</div></div>
</div>
复制代码

效果为

咱们发现9个item排成了一排，没有换行。为了使得item可以换行，咱们须要设置flex-wrap，它有三个值可选

nowrap：默认值，不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

flex-wrap: wrap;
复制代码

flex-wrap: wrap-reverse;
复制代码

flex-flow是flex-direction和flex-wrap两个属性的简写，默认值为row wrap

flex-flow: <flex-direction> || <flex-wrap>;
复制代码

justify-content是用来设置item在container在主轴上的对齐方式的，具体对齐方式与轴的方向有关,下面假设主轴为从左到右(row)。有下面几种值可选