CSS3新特性

2019-01-13

CSS3 简介

CSS 即层叠样式表（Cascading StyleSheet）
CSS3 是 CSS 技术的升级版本，CSS3 语言开发是朝着模块化发展的
模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 完全向后兼容，因此不必改变现有的设计。浏览器通常支持 CSS2。

CSS3 到底给我们带来了哪些新特性？
CSS3 把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影、渐变等。CSS3 不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。

CSS3 选择器

如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的 class 和 ID 的数量并让设计师更方便的维护样式表。

属性选择器
e[type=”text”] {} e[type=””] e[type^=””] e[type$=””]
*伪类选择器**
结构性伪类选择器 div:first-child div:last-child div:nth-child(even)
目标伪类选择器 p:target{}
UI 元素状态伪类选择器 :enabled :disabled :checked ::selection
语言伪类选择器 :lang(mingzi){}
否定伪类选择器 div:not(标签)
动态伪类选择器 input:focus{}

属性选择器

在 css3 中，增加了如下所示的四个属性选择器，使得属性选择器有了通配符的概念。

标签[属性名=“value”] 匹配属性等于某特定值的元素
标签[属性名^="value"] 匹配属性包含以特定的值开头的元素
标签[属性名$="value"] 匹配属性包含以特定的值结尾的元素
标签[属性名*=“value”] 匹配属性包含含有特定的值的元素

浏览器支持:
只有 IE6 不支持 CSS 的属性选择器。IE7 和 IE8、Opera、Webkit 核心和 Gecko 核心的浏览器都支持。所以在样式中使用属性选择器是比较安全的

伪元素选择器

:first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式
:first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
:before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。
:after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。

结构性伪类选择器

E:first-child 选择第一个子元素 E
E:last-child 选择最后一个子元素 E
E:nth-child(n) 选择一个或多个特定的子元素（第一个编号为 1）
E:nth-last-child(n) 选择一个或多个特定的子元素，从最后一个子元素开始算
E:nth-of-type(n) 选择指定的元素，仅匹配使用同种标签的元素
E:nth-last-of-type(n) 选择指定的元素，从元素的最后一个开始计算，仅匹配使用同种标签的元素
Nth-of-type(odd)奇数 Nth-of-type(even)偶数
E:first-of-type 匹配父元素下使用同种标签的第一个子元素
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素
E:only-child 匹配父元素下仅有的一个子元素
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素
E:empty 匹配一个不包含任何子元素的元素 ( 文本内容也被看作子元素 )
:not(e) 匹配不符合当前选择器的任何元素( 反选 )

目标伪类选择器

标签:target：匹配 URl 中锚点指定的元素，用此选择器可以给锚点指定的元素加样式
语法： Div:target{属性:属性值;}

UI 元素状态伪类选择器

这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用

E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的 radio（单选框）或 checkbox（复选框）元素
E::selection 用来改变浏览网页选中文本的默认效果
基本上只有 background 、color 有效果

语言伪类选择器

语言伪类选择器允许为不同的语言定义特殊的规则，这在多语言版本的网站用起来是特别的方便。
E:lang(language)表示选择匹配 E 的所有元素，且匹配元素指定了 lang 属性，而且其值为 language。

<style>
  p:lang(en) {
    background: yellow;
  }
</style>

否定伪类选择器

如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用整个样式时，可以使用 not 选择器

:not(标签)：不匹配选择符为 s 的元素。

动态伪类选择器

a:link {
  color: #ff6600;
} /* 未被访问的链接 */
a:visited {
  color: #87b291;
} /* 已被访问的链接 */
a:hover {
  color: #6535b2;
} /* 鼠标指针移动到链接上 */
a:active {
  color: #55b28e;
} /* 正在被点击的链接 */

a:active 用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
input:focus 用于元素成为焦点，这个经常用在表单元素上。

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

层级选择器

子元素选择器

E > F E 元素内的第一级子元素 F

兄弟选择器

E + F(相邻兄弟) E 元素后面的第一个兄弟元素 F
E ~ F（通用兄弟）所有在 E 元素之后的兄弟元素 F

浏览器前缀介绍

CSS3 属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。浏览器厂商以前就一直在实施 CSS3，但它还未成为真正的标准。为此，当一些 CSS3 样式语法还存在波动时，就提供了针对浏览器的前缀来表示它们的私有属性；

Gecko （火狐）前缀-moz-属性名：属性值；
Presto （欧朋）前缀-o-
Trident （IE）前缀-ms-
Webkit （苹果、谷歌）前缀-webkit-

CSS3 优雅降级和渐进增强问题

渐进增强（Progressive Enhancement）：
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 的修改使其可以在低版本浏览器上正常浏览。

CSS3 新增的部分属性

关于文本的
文本阴影：text-shadow
文本换行: Word-wrap 、 Word-break
CSS3 服务器端字体： @font-face

关于背景的
Background-origin 背景原点
Background-clip 背景裁切
Background-size 背景尺寸

关于边框的
Border-color 边框颜色
Border-image 图片边框
Border-radius 圆角边框
Box-shadow 盒子阴影

CSS3 新增的关于文本的属性

文本阴影：text-shadow: h-shadow v-shadow blur color

h-shadow 必需。水平阴影的位置。允许负值;
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

是否允许长单词换行：word-wrap:normal \ break-word

normal 默认值，只在允许的断字点换行;
break-word 在长单词或 URL 地址内部进行换行。

是否允许长单词换行(加上后单词不会另起一行显示)：word-break:normal\ break-all

normal 使用浏览器默认的换行规则
Break-all 允许在单词内换行。

注释：目前 Opera 不支持 word-break 属性

服务器端字体： @font-face
可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上

使用方法：

@font-face {
   font-family: webFont;
   src: url(‘font/字体名称.otf’) ；;
}
  Div {
  font-family: webFont;
}

字体图标的使用

阿里文字图标的加载步骤

先从阿里图标库下载图标；
把文件放到站点中，可以建一个 font 文件夹
把 iconfont.css 文件导入到 html 文件中；
在 html 文档中写一个内联元素如 span 标签,加 class=”iconfont 图标对应 class 名”

1	<span class="iconfont icon-shouji"></span>

CSS3 新增的关于背景的属性

背景裁切：Background-clip；用来规定背景的绘制区域（对于背景颜色）

border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

背景原点：Background-origin；用来规定 background-position 属性相对于什么位置来定位（对于背景图片）

padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。

背景尺寸：Background-size；用来规定背景图像的尺寸
数值设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
百分比将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”
cover 把背景图像等比例扩大或缩小，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像扩大或缩小至合适尺寸，以使其宽度或高度完全适应内容区域

CSS3 多背景属性
多个背景图可用逗号隔开

1
2
3

background: url(…) no-repeat left top, url(…) no-repeat left top,
  url(…) no-repeat left top, url(…) no-repeat left top,
  url(…) no-repeat left top;

CSS3 背景颜色模式
rgba（r:红色；g：绿色；b:蓝色；a：alpha）Hsl 颜色模式（色调，饱和度，亮度）如： 0 代表红色，120 代表绿色，240 代表蓝色
Hsla (色调，饱和度，亮度，透明度)

Background:rgba(0,0,0,1) 表示黑色，不透明
Background:hsla(8,97%,98%,0.5)

Border-color 边框颜色 border:2px solid #f00;

table {border-color: red} - 所有的边框都是红色。
table {border-color: red green} - 上边框和下边框是红色，而左边框和右边框是绿色。
table {border-color: red green blue}- 上边框是红色，左边框和右边框是绿色，下是蓝色
table {border-color: red green blue yellow} - 上边框是红色，右边框是绿色，下边框是蓝色，左边框是黄色。

Border-width: 边框粗细；
Border-style: 边框线性

CSS3 新增的关于边框的属性

Border-radius:圆角边框

Border-radius:5px;
Border-radius:50%;
Border-radius:20px 20px;
Border-radius:40px 0px 30px ;
border-radius:5px 15px 20px 25px ;
border-radius:20px / 10px ;   （扩展）

透明色：transparent

Box-shadow 盒子阴影

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

例：
p{box-shadow:0px 0px 5px 5px rgba(153,153,238,1);}
p{box-shadow:5px 0px 5px 5px rgba(153,153,238,1);}
p{box-shadow:-5px 0px 5px 0px rgba(153,153,238,1);}

图片边框：border-image
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

缩写：border-image:url(img/border.png) 30 round;

border-image-source: url(img/border.png);
border-image-slice: 30; （不需要加单位单位默认是 px）
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: round;

本文作者：人模人样的搬砖老段
本文链接：CSS3 新特性
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/03/22