初始CSS3新增与Web字体_新增web 字体-优快云博客

本文链接：https://blog.youkuaiyun.com/Adios_0403/article/details/131343890

查询CSS3兼容性的网站

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

CSS3新增长度单位

rem 根元素字体大小的倍数，只与根元素字体大小有关。
vw 视口宽度的百分之多少，10vw就是视口宽度的10%。
vh视口高度的百分之多少，10vh就是视口高度的10%。
vmax视口宽高中大的那个的百分之多少。（了解即可）
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.youkuaiyun.com/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- */
}