CSS3基础笔记（1）---- CSS3新增长度单位、颜色设置方式、选择器、盒模型相关属性、背景属性、边框属性、文本属性、新增渐变、web字体

本文链接：https://blog.youkuaiyun.com/m0_61332945/article/details/130956442

本文详细介绍了CSS3的新特性，包括新增的长度单位如rem、vw、vh等，颜色设置方式rgba和hsl，以及选择器、盒模型相关属性如box-sizing和resize。还涵盖了边框属性如border-radius，文本属性如text-shadow和text-overflow，以及渐变效果和Web字体的使用方法。文章旨在帮助读者深入理解和应用CSS3的新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS基本语法

1.CSS3新增长度单位

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

2.CSS3新增颜色设置方式

分别是rgba、hsl、hsla。(颜色的表示方式)

3.CSS3新增选择器

CSS3新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素。(CSS选择器)

4.CSS3新增盒模型相关属性

4.1 box-sizing怪异盒模型

box-sizing属性：设置盒模型的两种类型

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

4.2 resize调整盒子大小

resize属性：控制是否允许用户调节元素尺寸。

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

4.3 box-shadow盒子阴影

box-shadow属性：为盒子添加阴影

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

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

4.4 opacity不透明度

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

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

5.CSS3新增背景属性

5.1 background-origin

作用：设置背景图的原点。

语法

 1.padding-box：从padding区域开始显示背景图像。---默认值
 2.border-box： 从border区域开始显示背景图像。
 3.content-box： 从content区域开始显示背景图像。

5.2 background-clip

作用：设置背景图的向外裁剪的区域。

语法

 1.border-box：从border区域开始向外裁剪背景。 —— 默认值
 2.padding-box：从padding区域开始向外裁剪背景。
 3.content-box：从content区域开始向外裁剪背景。
 4.text：背景图只呈现在文字上。

5.3 background-size

作用：设置背景图的尺寸。

语法：

值	含义
auto	背景图片的真实大小。（默认值）
contain	将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内。
cover	将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上。
background-size:100px 200px	用长度值指定背景图片大小，不允许为负值
background-size:100% 100%	用百分比指定背景图片大小，不允许为负值

5.4 background复合属性

语法：

 background: color url repeat position / size origin clip
 注意：
   1.origin和clip的值如果一样，如果只写了一个值，那么origin和clip都设置；如果设置了两个值，前面的是origin，后面的是clip。
   2.size的值必须写在position值的后面，并且用 / 分开。

5.5 多背景图

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

6.CSS3新增边框属性

6.1 边框圆角

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

6.2 边框外轮廓（了解）

outline-width：外轮廓宽度。
outline-color：外轮廓颜色。

outline-style：外轮廓风格。

 none：无轮廓
 dotted：点状轮廓
 dashed：虚线轮廓
 solid：实线轮廓
 double：双线轮廓

outline-offset：设置外轮廓与边框的距离，正负值都可以设置。
outline复合属性
```
 outline：50px solid blue；
```

7.CSS新增文本属性

7.1 文本阴影

text-shadow属性：给文本添加阴影。
语法：
```
 text-shadow：h-shadow v-shadow blur color;
 默认值：text-shadow：none表示没有阴影。
```
值描述
h-shadow 必须写，水平阴影的位置，可以为负值
v-shadow 必须写，垂直阴影的位置，可以为负值
blur 可选，模糊的距离
color 可选，阴影的颜色

值	描述
h-shadow	必须写，水平阴影的位置，可以为负值
v-shadow	必须写，垂直阴影的位置，可以为负值
blur	可选，模糊的距离
color	可选，阴影的颜色

7.2 文本换行

white-space属性：设置文本换行方式。

常规值如下：

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

7.3 文本溢出

text-overflow属性：设置文本内容溢出时的呈现模式。

值含义
clip 当内联内容溢出时，将溢出部分裁切掉。（默认值）
ellipsis 当内联内容溢出块容器时，将溢出部分替换为 … 。
注意：要使得text-overflow属性生效，块容器必须显式定义overflow为非visible值，white-space为nowrap值。

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

7.4 文本修饰

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：双线
  dotted：点状线条
  dashed：虚线
  wavy：波浪线
- text-decoration-color文本装饰线条的颜色

7.5 文本描边

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

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

8.CSS3新增渐变

8.1 线性渐变

多个颜色之间的渐变，默认从上到下渐变。
```
background-image: linear-gradient(red,yellow,green);
```

使用关键词设置线性渐变的方向。

background-image: linear-gradient(to top,red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);

使用角度设置线性渐变的方向。

background-image: linear-gradient(30deg,red,yellow,green);

调整开始渐变的位置。

background-image: linear-gradient(red 50px,yellow 100px ,green 150px);

8.2 径向渐变

多个颜色之间的渐变，默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）
```
background-image: radial-gradient(red,yellow,green);
```

使用关键词调整渐变圆的圆心位置。

background-image: radial-gradient(at right 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,red,yellow,green);
background-image: radial-gradient(50px 100px,red,yellow,green);

调整开始渐变的位置。

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

8.3 重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。
使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。
使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient 。

9.web字体

9.1 基本用法

可以通过 @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- */
	}