2025年css3新增属性（css3新增属性有哪些）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

1.1 CSS3 浏览器私有前缀

讯享网

1.2 CSS3 新增长度单位

rem： 根元素字体大小的倍数。注意与 em 的区别。

vw： 把视口宽度分为100份，指定占其中的多少份。注意与百分比的区别。

vh： 把视口高度分为100份，指定占其中的多少份。

vmax： 把视口宽和高中大等分为100份，指定占其中多少份。

vmin： 把视口宽和高中小等分为100份，指定占其中多少份。

1.3 CSS3 新增颜色设置方式

rgba()： 在rgb的基础上多了不透明度（opacity），取值范围 0 ~ 1 之间的小数（0：完全透明，1：完全不透明）。

hsl()： h:色相（0_{360）；s：饱和度（0%}100%）；l：亮度（0%~100%）。

hsla() ：在 hsl 的基础上多了不透明度。

2.1 基本选择器（6个）

标签名选择器：

类名选择器：

讯享网

ID选择器：

全局选择器：

讯享网

并集选择器（多选择器）

交集选择器：

讯享网

2.2 层级选择器（4个）

后代元素选择器：

讯享网

子元素选择器：

讯享网

选择后面相邻的一个兄弟元素：

选择后面所有的兄弟元素：

讯享网

2.3 属性选择器（5个）

选择拥有attrName 属性的元素。

选择 attrName 属性的值是 value 的元素。

选择 attrName 属性的值以 value 开头的元素。

选择 attrName 属性的值以 value 结尾的元素。

选择 attrName 属性的值中包含 value 的元素。

2.4 伪类选择器

① 动态伪类选择器（5个）

讯享网

② 目标伪类选择器（1个）

③ 语言伪类选择器 (1个，了解)

讯享网

④ UI元素伪类选择器（3个）

⑤ 结构伪类选择器（12个）

讯享网

⑥ 否定伪类选择器（1个）

2.5 伪元素选择器（6个）

讯享网

2.6 选择器的优先级（权重）

① box-sizing 属性

通过设置该属性，决定 width 和 height 设置的是内容的大小还是盒子的总大小。

值：

content-box，默认值，width 和 height 设置的是内容的大小。

border-box, width 和 height 设置的是盒子的总大小。

② 盒子阴影 box-shadow

讯享网

③ 不透明度 opacity

设置元素整体的不透名度，取值范围是 0 ~ 1 之间的小数，数值越大越不透明，0表示完全透明，1表示完全不透明。

4.1 新增属性

background-origin 设置背景图调整位置所在坐标系的原点
```
讯享网
```
background-clip 裁剪背景图，设置什么范围内的背景图可见
```
讯享网
```
background-size 调整背景图图片的大小

4.2 background 复合属性

讯享网

复合属性的相关规则：

background-size 复合到 background 中，需要写在 background-position 值的后面，用隔开。

background-origin 和 background-clip 值是一样的关键字，设置一个被当做background-origin,设置两个(前面是origin，后面是clip)

4.3 多背景图

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

5.1 边框圆角

CSS 属性名含义值 border-top-left-radius 设置左上角圆角设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径 border-top-right-radius 设置右上角圆角设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径 border-bottom-left-radius 设置左下角圆角设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径 border-bottom-right-radius 设置右下角圆角设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径 border-radius 复合属性长度，同时设置多个角

border-radius 属性值的设置规则：

设置正圆圆角：

1 个值：表示 4 个角的半径。

2 个值：第一个值表示左上和右下的半径，第二个值表示右上和左下的半径。

3 个值：第一个值表示左上角的半径，第二个值表示右上和左下的半径，第三个值表示右下的半径。

4 个值：分别表示左上、右上、右下、左下的半径。

设置椭圆圆角（x半径与y半径不一致）

使用分别设置 x 半径和y半径，每一组都可以写 1 ~ 4 个值
讯享网

5.2 外轮廓

CSS 属性名含义值 outline-width 设置外轮廓宽度长度 outline-color 设置外轮廓颜色颜色 outline-style 设置外轮廓风格 none、solid、dashed、double、dotted 等 outline 复合属性三个子属性的值 outline-offset 设置外轮廓与边框的距离，默认是 0 长度

注意： outline-offset 不是 outline 的子属性！

CSS 属性名含义值 text-decoration-line 设置哪一种修饰线 none: 默认值，无修饰线
underline: 下划线
overline: 上划线
line-through：删除线 text-decoraiton-color 设置修饰线颜色颜色 text-decoration-style 设置修饰线风格 solid：默认，实线
dashed：虚线
dotted：点线
double：双实线
wavy：波浪线 text-decoration 复合属性三个子属性的值 text-align-last 设置最后一行文本的水平对齐方式 start：默认值，开始方向对齐
end：结束方向对齐
left：左对齐
right：右对齐
center：中间对齐
justify：两端对齐 white-space 设置文本的换行方式 normal：默认值，默认的样式
pre：原格式显示
pre-wrap: 在pre的基础上增加了自动换行
pre-line: 在pre的基础上增加了自动换行但是会忽略多个空格。
nowrap：强制文本在一行显示 text-overflow 设置文本的溢出方式 clip：默认，溢出的文本裁掉
ellipsis：文字过多，后面显示省略号。 text-shadow 设置文本阴影设置 2 ~ 4 个值，包括颜色、偏移位置、模糊值

注意：

CSS3之后， text-align 属性的默认值不是 left 了，而是 start 。

text-overflow 属性生效的前提是： ① 设置 ② 需要设置。