初始CSS3新增与Web字体

查询CSS3兼容性的网站

查询CSS3兼容性的网站：https://caniuse.com/

CSS3新增长度单位

1. rem 根元素字体大小的倍数，只与根元素字体大小有关。
2. vw 视口宽度的百分之多少，10vw就是视口宽度的10%。
3. vh视口高度的百分之多少，10vh就是视口高度的10%。
4. vmax视口宽高中大的那个的百分之多少。（了解即可）
5. vmin视口宽高中小的那个的百分之多少。（了解即可）

CSS3新增颜色设置方式

CSS3新增了三种颜色设置方式，分别是：rgba、hsl、hsla。

rgb与rgba

/* 混合出任意一种颜色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色（用的少） */
color: rgba(100%, 0%, 0%, 50%);/* 半透明的红色 */

HSL与HSLA

• HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl(色相, 饱和度, 亮度)
  • 色相：取值范围是0~360度。
  • 饱和度：取值范围是0%~100%。（向色相对应颜色中添加灰色，0%全灰，100%没有灰）
  • 亮度：取值范围是0%~100%。（0%亮度没了，所以就是黑色。100%亮度太强，所以就是白色了）
• HSLA其实就是在HSL的基础上，添加了透明度。

CSS3新增选择器、

CSS3新增的选择器有：动态伪类、目标伪类、语言伪类、UI伪类、结构伪类、否定伪类、伪元素。（可前往以下帖子查看）
https://editor.csdn.net/md/?articleId=130947422

CSS3新增盒子模型相关属性

box-sizing 怪异盒模型

使用box-sizing属性可以设置盒模型两种类型

可选值	含义
content-box	width 和 height 设置的是盒子内容区的大小。（默认值）
border-box	width 和 height 设置的是盒子总大小。（怪异盒模型）

resize 调整盒子大小

使用resize属性可以控制是否允许被用户调节元素尺寸。

值	含义
none	不允许用户调整元素大小。（默认）
both	用户可以调节元素的宽度和高度。
horizontal	用户可以调节元素的宽度。
vertical	用户可以调节元素的高度。

使用必须与overflow配合

box-shadow 盒子阴影

使用 box-shadow 属性为盒子添加阴影。

• 语法
  box-shadow: h-shadow v-shadow blur spread color inset;
• 各个值的含义

值	含义
h-shadow	水平阴影的位置，必须填写，可以为负值
v-shadow	垂直阴影的位置，必须填写，可以为负值
blur	可选，模糊距离
spread	可选，阴影的外延值
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

• 默认值：box-shadow:none 表示没有阴影
• 示例：

	/* 写两个值：水平位置 垂直位置 */
	box-shadow: 10px 10px;
	
	/* 写三个值：水平位置 垂直位置 阴影颜色 */
	box-shadow: 10px 10px blue;
	
	/* 写两个值：水平位置 垂直位置 模糊程度 阴影颜色*/
	box-shadow: 10px 10px 10px blue;
	
	/* 写两个值：水平位置 垂直位置 模糊程度 阴影颜色*/
	box-shadow: 10px 10px 20px 0px blue;
	
	/* 写两个值：水平位置 垂直位置 模糊程度 阴影颜色 内阴影 */
	box-shadow: 10px 10px 20px 0px blue inset;

opacity 不透明度

• opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间的小数，0 是完全透明，1 表示完全不透明。

opacity 与 rgba 的区别？
opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度
rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

CSS3新增背景相关属性

background-origin

• 作用：设置背景图的原点。
• 语法
  1. padding-box ：从padding区域开始显示背景图像。—默认值
  2. border-box ：从border区域开始显示背景图像。
  3. content-box ：从content区域开始显示背景图像。

background-clip

• 作用：设置背景图的向外裁剪的区域。
• 语法
  1. border-box ：从border区域开始向外裁剪背景。—默认值
  2. padding-box ：从padding区域开始向外裁剪背景。
  3. content-box ： 从content区域开始向外裁剪背景。
  4. text ：背景图只呈现在文字上。
     注意：若值为text，那么background-clip要加上-webkit-前缀。且文字颜色需设置为透明

background-size

• 作用：设置背景图的尺寸。
• 语法：
  1. 用长度值指定背景图片大小，不允许负值。
     background-size: 300px 200px;
  2. 用百分比指定背景图片大小，不允许负值。
     background-size: 100% 100%;
  3. auto ：背景图片的真实大小。—默认值
  4. content ：将背景图片等比例缩放，是背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器部分区域没有背景图片。
     background-size: contain;
  5. cover ：将背景图片等比例缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片可能显示不完整。—相对比较好的选择
     background-size: cover;

background复合属性

• 语法：
  background: color url repeat position / size origin clip

• 注意：

  1. orange和clip的值如果一样，如果只写一个值，则orgin和clip都设置；如果设置了两个值，前面的是origin，后面的clip。
  2. size的值必须写在position值的后面，并且用 / 分开

多图背景

CSS3允许元素设置多个背景图片

/* 添加多个背景图 */
background: url('../images/bg-lt.png') no-repeat left top,
            url('../images/bg-lt.png') no-repeat right top,
            url('../images/bg-lb.png') no-repeat left bottom,
            url('../images/bg-rb.png') no-repeat right bottom

边框圆角

• 在CSS3中，使用border-radius属性可以将盒子变为圆角。
• 同时设置四个圆角：
  border-radius: 10px;
• 分开设置每个角的圆角：

属性名	作用
border-top-left-radius	设置左上角圆角半径：1. 一个值是正圆半径，2. 两个值分别是椭圆的x半径、y半径
border-top-right-radius	设置右上角圆角半径：1. 一个值是正圆半径，2. 两个值分别是椭圆的x半径、y半径
border-bottom-right-radius	设置右下角圆角半径：1. 一个值是正圆半径，2. 两个值分别是椭圆的x半径、y半径
border-bottom-left-radius	设置左下角圆角半径：1. 一个值是正圆半径，2. 两个值分别是椭圆的x半径、y半径

• 分开设置每个角的圆角，综合写法：
  border-radius: 100px 50px 20px 10px / 50px 20px 10px 5px;

边框外轮廓

• outline-width : 外轮廓的宽度。
• outline-color : 外轮廓的颜色。
• outline-style : 外轮廓的风格。
  • none : 无轮廓
  • dotted : 点状轮廓
  • dashed : 虚线轮廓
  • solid : 实线轮廓
  • double : 双线轮廓
• outline-offset 设置外轮廓与边框的距离，正负值都可以设置。
  注意：outline-offset不是outline的子属性，是一个独立的属性
• outline复合属性
  outline: 50px solid blue;

CSS3新增文本属性

文本阴影

• 在CSS3中，我们可以使用text-shadow属性给文本添加阴影。
• 语法：
  text:shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需写，水平阴影的位置，允许负值
v-shadow	必需写，垂直阴影的位置，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色
默认值：text-shadow: none表示没有阴影。

文本换行

• 在CSS3中，我们可以使用white-space属性设置文本换行方式。
• 常用值如下：

值	含义
normal	文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre	原样输出，与pre标签的效果相同
pre-wrap	在pre效果的基础上，超出元素边界自动换行
pre-line	在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会被忽略（仅忽略文字始末的空格）
nowrap	强制不换行

文本溢出

• 在CSS3中，我们可以使用text-overflow属性设置文本你内容溢出时的呈现模式。
• 常用值如下：

值	含义
clip	当内联样式溢出时，将溢出部分裁切掉。（默认值）
ellipsis	当内联内容溢出块容器时，将溢出部分替换为…

注意：要使得text-overflow属性生效，快容器必须定义overflow为非visible值，white-space为nowrap值。

文本修饰

• CSS3升级了text-decoration属性，让其变成了复合属性。
• text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
• 子属性及其含义：
  • text-decoration-line设置文本装饰线的位置
    • none：指定文字无装饰（默认值）
    • underline：指定文字的装饰是下划线
    • overline：指定文字的装饰是上划线
    • line-through：指定文字的装饰是贯穿线
  • text-decoration-style文本装饰线条的形状
    • solid：实线（默认）
    • double：双线
    • botted：点状线条
    • dashed：虚线
    • wavy：波浪线
  • text-decoration-color文本装饰线条的颜色

文本描边

注意：文字描边功能仅webkit内核浏览器支持。

• -webkit-text-stroke-width：设置文字描边的宽度，写长度值。
• -webkit-text-stroke-color：设置文字描边的颜色，写颜色值。
• -webkit-text-stroke：复合属性，设置文字描边宽度和颜色。

CSS3新增渐变

线性渐变

• 多个颜色之间的渐变，默认从上到下渐变。
  background-image: linear-gradient(red,yellow,green);
  
• 使用关键词设置线性渐变的方向。
  background-image: linear-gradient(to right,red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);
  
• 使用角度设置线性渐变的方向。
  background-image: linear-gradient(20deg,red,yellow,green);
  
• 调整开始渐变的位置。
  background-image: linear-gradient(red 50px,yellow 100px,green 150px);
  

径向渐变

background-image: 半径 at 圆心位置 颜色1 终点位置, 颜色2 终点位置...;

• 多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）
  background-image: radial-gradient(red,yellow,green);
  
• 使用关键词调整渐变圆的圆心位置。
  background-image: radial-gradient(at left,red,yellow,green);
background-image: radial-gradient(at left top,red,yellow,green);
  
• 使用像素值调整渐变圆的圆心位置。
  background-image: radial-gradient(at 100px 50px,red,yellow,green);
  
• 调整渐变形状为正圆 （两种方法）。
  background-image: radial-gradient(circle,red,yellow,green);
background-image: radial-gradient(100px 100px,red,yellow,green);
  
  
• 调整开始渐变的位置。
  background-image: radial-gradient(red 50px,yellow 100px,green 150px);
  

重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。

• 使用repeating-linear-gradient进行重复线性渐变，具体参数同linear-gradient。
• 使用repeating-radial-gradient进行重复线性渐变，具体参数同radial-gradient。

Web字体

基本用法

可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。

• 语法（简写方式）

@font-face {
	font-family: "情书字体";
	src: url('./方正手迹.ttf');
}

• 语法（高兼容性写法）

@font-face {
	font-family: "atguigu";
	font-display: swap;
	src: url('webfont.eot'); /* IE9 */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('webfont.woff2') format('woff2'),
	url('webfont.woff') format('woff'), /* chrome、firefox */
	url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android*/
	url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

定制字体

• 中文的字体文件特别大，使用完整的字体不现实，通常针对某几个文字进行单独定制。
• 可使用阿里Web字体定制工具：https://www.iconfont.cn/webfont

字体图标

• 相对图片更加清晰。
• 灵活性高，更方便变大小、颜色、风格等。
• 兼容性好，IE也能支持。
• 阿里图标官网地址：https://www.iconfont.cn/