CSS3中的新特性

... 2025-7-10 大约 5 分钟

# 边框

圆角 border-radius
阴影 box-shadow
图片 border-image

# 背景

图片 background-image
尺寸 background-size
定位 background-origin
裁剪 background-clip

# 颜色

RGBA
渐变 (线性:直线渐变，径向:圆形渐变)
- line-gradient 线性渐变
- repeating-linear-gradient 循环线性渐变
- radial-gradient 径向渐变
- repeating-radial-gradient 循环径向渐变

# 文本

阴影 text-shadow
换行 word-wrap

# 字体

使用 @font-face 规则定义字体，指向字体的文件，
使用 font-family 属性引用字体的名称。

# 转换

通过 Transform，我们能够对元素进行移动、缩放、转动、拉长或拉伸，转换是使元素改变形状、尺寸和位置的一种效果。

移动 translate()、translateX()、translateY()
旋转 rotate()、rotateX() 、rotateY()
缩放 scale()、scaleX()、scaleY()
倾斜 skew()、skewX()、skewY()
矩阵 matrix()
透视 perspective()

# 过渡

transition：为样式添加过渡效果

语法：transition : transition-property | transition-duration | transition-timing-function | transition-delay;

属性名称 transition-property
持续时间 transition-duration
过渡方式 transition-timing-function
延迟时间 transition-delay

# 动画

通过@keyframes 规则来创建动画
- 通过 from , to 关键字和百分比设置动画发生的时间
通过 animation 属性设置动画
- animation 是除了 animation-play-state 属性所有动画属性的简写属性。
- 语法：animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction

# 多列

通过 CSS3 够创建多个列来对文本进行布局，就像我们经常看到的报纸的布局一样。

columns： column-width column-count。
- column-width：规定列的宽度。
- column-count：属性规定元素应该被分隔的列数。
column-fill：规定如何填充列。
column-gap：属性规定列之间的间隔。
column-rule：属性设置列之间的宽度、样式和颜色规则。
- column-rule-width：规定列之间规则的宽度。
- column-rule-style：规定列之间规则的样式。
- column-rule-color：规定列之间规则的颜色。
column-span：规定元素应该横跨的列数。

# 用户界面

调整元素尺寸 resize
- none 无法调整
- both 可调整宽高
- horizontal 可调整水平方向（宽）
- vertical 可调整垂直方向（高）
设置盒模型 box-sizing
- inherit 继承父元素
- content-box 在宽高之外绘制元素的内边距和边框
- border-box 边框和内边距都在已设定的宽高内绘制
轮廓偏移量 outline-offset
弹性布局 Flexbox

# 媒体查询

媒体查询

不同屏幕分辨率，应用不同的样式

@media mediaType and/not/only (mediaFeature) { CSS-Code }

如：

@media screen and (max-width: 800px) and (min-width: 400px) {
  /* CSS样式 */
}

1
2
3

# mediaType（设备类型）

all 适用于所有类型
print 适用于打印机和打印预览
screen 适用于电脑屏幕、平板电脑、智能手机等
speech 适用于屏幕阅读器

# 逻辑运算符

all

适用于所有的设备类型；
and

媒体查询中使用来连接多种媒体特性,一个媒体查询中可以包含 0 或多个表达式，表达式可以是 0 或多个关键字，以及一种媒体类型。
not

用来排除某种设备。比如，排除打印设备 @media not print；
only

用以指定某特定媒体设备。

对于支持 Media Queries 的移动设备来说，如果存在 only 关键字，移动设备的 Web 浏览器会忽略 only 关键字并直接根据后面的表达式应用样式文件。

对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web 浏览器，遇到 only 关键字时会忽略这个样式文件。

@media not print and（max-width：200px） {
  /* 样式代码将被使用在除打印设备和设备宽度小于200px下所有设备中。 */
}