HTML5、CSS3新特性一览（下）

• 2019-12-16
  上篇讲了HTML5，这篇来讲CSS3的新特性。有兴趣的可以移步看一下。
  HTML5、CSS3新特性一览（上）。

---

— 新特性 —

1. 媒体查询

• 可以查询设备的物理像素然后进行自适应操作
• 从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。

(1). 通过媒体类型引用样式表

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

(2). css中的媒体查询规则

@media all and (min-width: 800px) { 
	/* 这里填写css样式 */
	/* all代表所有媒体类型，这里的样式精会应用与所有媒体类型 */
	/* (min-width:800px)表示最小宽度为800px的屏幕会应用这个样式 */
}

(3). and 条件（与，且）

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { 
	/* and 条件等同于js里的 &&（且），这里的样式必须同时符合上面两个条件才会展示 */ 
}

(4). or 条件（或）

@media (min-width:800px) or (orientation:portrait) { 
	/* or 条件等同于js里的 ||（或），这里的样式只需符合上面其中之一的条件就会展示 */ 
}

(5). not条件（非）

@media (not min-width:800px){ 
	/* not 条件等同于js里的 !（非），这里的样式不符合最小宽度为800px展示 */ 
}

2. 选择器

• 选择器大家之前肯定用过，我就只列CSS3新加的用法好了。

（1）通过元素的属性选择

div~p{
	/* 选择前面有 div 元素的每个 p 元素 */
}
a[src^="https"]{
	/* 选择 src 属性以 “https” 开头的每个a元素 */
}
a[src$=".pdf"]{
	/* 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素 */
}
a[src*="abc"]{
	/* 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素 */
}

（2）通过元素的位置来选择

p:first-of-type{
	/* 选择属于其父元素的首个 <p> 元素的每个 <p> 元素 */
}
p:last-of-type{
	/* 选择属于其父元素的最后 <p> 元素的每个 <p> 元素 */
} 
p:only-of-type{
	/* 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 */
} 
p:only-child{
	/* 选择属于其父元素的唯一子元素的每个 <p> 元素 */
} 
p:nth-child(2){
	/* 选择属于其父元素的第二个子元素的每个 <p> 元素 */
} 
p:nth-last-child(2){
	/* 同上，从最后一个子元素开始计数 */
} 
p:nth-of-type(2){
	/* 选择属于其父元素第二个 <p> 元素的每个 <p> 元素 */
} 
p:nth-last-of-type(2){
	/* 同上，但是从最后一个子元素开始计数 */
} 
p:last-child{
	/* 选择属于其父元素最后一个子元素每个 <p> 元素 */
} 

（3）通过状态选择元素

:root{
	/* 选择文档的根元素 */
} 
p:empty{
	/* 选择没有子元素的每个 <p> 元素（包括文本节点） */
} 
#news:target{
	/* 选择当前活动的 #news 元素 */
} 
input:enabled{
	/* 选择每个启用的 <input> 元素 */
} 
input:disabled{
	/* 选择每个禁用的 <input> 元素 */
} 
input:checked{
	/* 选择每个被选中的 <input> 元素 */
} 
:not(p){
	/* 选择非 <p> 元素的每个元素 */
} 
::selection{
	/* 选择被用户选取的元素部分 */
} 

3. 弹性盒子

• 弹性盒子是 CSS3 新添加的一种布局模式。
• 弹性盒子这个很多人都讲过了，官方也有文档，都讲的非常清楚。
• 我个人觉得这个很好用，也没有踩过什么坑，所以就不展开讲了，贴一下常用的属性。

属性	描述
display	指定 HTML 元素盒子类型
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

---

— 盒子样式 —

1. border-radius 圆角样式

可以给元素添加圆角，将原来的方形盒子变成圆角的盒子。

.box1{
	border-radius: 10px;
}

也可以规定不同大小的圆角，做成特殊形状的盒子。

/* 多个值的时候只需要记住，数值在左上角开始，顺时针旋转就可以了 */
.box2{
	border-radius: 10px 20px;		/* 左上角和右下角为10px，右上角和左下角为20px */
}
.box3{
	border-radius: 10px 20px 30px;		/* 左上角为10px，右上角和左下角为20px，右下角为30px */
}
.box4{
	border-radius: 10px 20px 30px 40px;		/* 左上角为10px，右上角为20px，右下角为30px，左下角为40px */
}
/* 可以分开定义，box5等价于box4 */
.box4{
	border-top-left-radius: 10px;		/* 左上角为10px */
	border-top-right-radius: 20px;		/* 右上角为20px */
	border-bottom-right-radius: 30px;		/* 右下角为30px */
	border-bottom-left-radius: 40px;		/* 左下角为40px */
}

2. box-shadow 盒子阴影

• box-shadow的前三个值分别代表x轴位移，y轴位移，和（模糊的）阴影大小，是必填项。
• 第四个值代表不模糊的阴影大小，可以不填。
• 默认情况下，box-shadow显示的是外阴影，如果写了inset则代表内阴影，可以用来做立体效果（比如按钮）。

.box1{
	box-shadow: 10px 10px 5px 5px #888888 inset;
}

3. border-image 图像边框

这个样式我之前写过一次，这里就不重复了。有兴趣的可以点这里跳转。

4. background 盒子背景

• 关于background-clip之前在盒子模型的时候讲过一点，附上链接。
• background-Origin用于定义背景对齐方式，可选值和background-clip一样。
• background-size也是新增的属性，用于定义背景图片大小。可以使用px或%来设置，也可以用contain规定缩放为可以完整显示的最大大小，或使用cover规定显示为全部覆盖的最小大小。
• 还有值得一提的是背景支持多个图片，顺序是越靠前的显示在越上面。

.box1{
    background-image: url(bg.png), url(img.png);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
/* 也可以合并起来简写，box2等价于box1 */
.box2{
    background: url(bg.png) right bottom no-repeat, url(img.png) left top repeat;
}

5. 渐变背景

• css3支持盒子渐变背景，分为线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。
• 可以添加多个颜色节点和设置节点位置。
• 可以规定渐变角度（线性渐变）。
• 讲起来内容有点多… 所以我直接把代码贴在这里 大家自行做完形填空吧：D

/* 这个是径向渐变 */
.box1{
	/* linear-gradient径向渐变，left起点方向（等于90deg），第一个颜色和位置（颜色支持# rgb rgba..，位置可以是px或%），以此类推.. */
	background: linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
	/* 移动端的话上面那个就够用，下面这些是为了兼容各个浏览器 */
	background: -o-linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
	background: -ms-linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
	background: -moz-linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
	background: -webkit-linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
}

6. CSS3用户界面 / 盒模型

• 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，

(1). resize

• resize 用于规定是否可以由用户调整元素的大小。
  可选值包括：none（不可调整），both（可调整宽高），horizontal（可调整宽度），vertical（可调整高度）。
• 这个属性不仅可以让普通元素可调整宽高，还解决了之前 textarea 的宽高总是能被拖动的问题。

textarea{
	resize: none;
}

(2). box-sizing

• box-sizing 用于规定盒子尺寸，之前讲过了可以直接去看，就不在重复了。
  css盒子模型和样式更改。

(3). outline

• outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  轮廓线属性包括：outline-color，outline-style，outline-width。简写时按照这个顺序进行声明。
  如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
• 轮廓线不会占据空间，也不一定是矩形。
  outline在border外侧，并不在margin外侧（也就是与margin无关），可以用来做外层边框的样式。

.box1 {
	outline: #00ff00 dotted 10px;
}
/* 也可以分开写，box2样式等价于box1 */
.box2{
	outline-color: #00ff00;
	outline-style: dotted;
	outline-width: 10px;
}

---

— 文本样式 —

1. text-shadow 文本阴影

文本阴影类似盒子阴影，但是少了阴影大小和内阴影两个可选选项。
可定义的值包括：x轴偏移、y轴偏移、模糊大小、阴影颜色。

.text1{
	text-shadow: 5px 5px 5px #FF0000;
}

2. text-overflow 溢出文本展示

可以利用这个属性，设置文本只能在一行或几行内展示。

/* 文本在一行内展示 */
.text1{
	display: block;		/* 行内元素不用 */
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文本在多行展示 */
.text2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 几行后显示省略号 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

3. word-wrap 文字换行（英文和数字）

规定当英文或数字真的非常长的话要不要自动换行，（默认不换行，会溢出这个盒子）。

.text1{
	word-wrap:break-word;
}

4. word-break 单词换行（英文和数字）

如果只用 word-wrap 可能仍然不够美观，因为浏览器在默认情况下不会对没有超过盒子长度的单词强制换行，所以展示的效果可能还是参差不齐的。所以一般会配合 word-break 同时使用。

.text1{
	word-break:keep-all;		//只在半角空格或连字符处换行
}
.text2{
	word-break:break-all;		//允许在单词内换行
}

5. @font-face 规则定义字体

• 使用@font-face 规则可以定义任意一种你能找到的字体展示在页面里。
• 但是这个规则的兼容性并没有那么好，IE9才开始支持这个规则，这就表示在IE8及其之前的版本可能展示不出来。所以我个人不是很推荐，如果只是标题需要花字的话更推荐通过添加图片展示。

6. column-count 创建多列

• column-count规定文本可以以几列的方式布局
• 这个属性我没怎么用过，因为感觉在兼容性上并不是很好，当然主要原因是还没有遇到可以用他来实现的需求hhhh，所以就先把用法贴在这里了，如果以后有用到或者踩坑了再更吧。

.box{
	column-count:3;		/* 文本将分为3列展示 */
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
}

• 还有其他的属性和用法一起贴在这里了

属性	用法
columns	设置 column-width 和 column-count 的简写
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度

---

— 变形和动画 —

1. 2D/3D转换和变形

（1）2D转换

• translate 移动

.box1{
	transform:translate(50px,100px);		/* 向右移动50px，向下移动100px */
	-ms-transform:translate(50px,100px); 		/* IE 9 */
	-webkit-transform:translate(50px,100px); 		/* Safari and Chrome */
}

• rotate 旋转

.box2{
	transform: rotate(30deg);		/* 顺时针旋转30度（负数的话为逆时针旋转） */
	-ms-transform: rotate(30deg); 		/* IE 9 */
	-webkit-transform: rotate(30deg);		 /* Safari and Chrome */
}

• scale 缩放

.box3{
	transform: scale(2,3); /* x轴缩放为2倍，y轴缩放为3倍 */
	-ms-transform:scale(2,3); /* IE 9 */
	-webkit-transform: scale(2,3); /* Safari */
}

（2）3D转换

• rotateX()

.box1{
	transform:rotateX(120deg);		/* 沿x轴旋转120度 */
	-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}

• rotateY()

.box2{
	transform:rotateY(120deg);		/* 沿y轴旋转120度 */
	-webkit-transform:rotateY(120deg); /* Safari and Chrome */
}

2. transition 过渡动画

• 过渡共有四个属性，分别为：
  transition-property（ 属性名称），必填
  transition-duration（花费时间，默认为0），必填
  transition-timing-function（时间曲线，默认为“ease”）
  transition-delay（动画延时，默认为0）
• 可以使用transition简写，同时设置以上四个属性。

（1）简单的宽高变化

.box1{
    transition: width 1s linear 2s;		/* 宽度变化，动画时间1s，速度曲线linear，延时2s */
    -webkit-transition:width 1s linear 2s;		 /* Safari */
}
/* 也可以分开写，box2等价于box1 */
.box2{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

（2）transition可以同时添加多个属性的变化

.box3{
	/* 多个属性都需要变化时，用逗号分隔 */
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

3. @keyframes 规则和 animation动画

• @keyframes 规则是创建动画。
  @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst{
	/* 可以用form和to，更精细的也可以用百分比 */
    from {background: red;}
    to {background: yellow;}
}
@-webkit-keyframes myfirst{		/* Safari 与 Chrome */
    from {background: red;}
    to {background: yellow;}
}

• 使用animation 把定义好的动画绑定到一个选择器上
  如果不绑定，相当于没有元素应用这个动画，动画不会有任何效果

• animation 的用法和 transition 类似，只是名称不是宽高等属性名称，而是我们刚刚定义的动画名称

.box1{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

• animation 相比 transition 多了几个属性，分别为：

属性	作用
animation-fill-mode	规定当动画不播放时，比如动画完成或当动画有一个延迟未开始播放时，应用到元素的样式。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。