css3新特性一、布局与盒模型相关特性弹性布局（Flexbox）用于解决容器内元素的排列、对齐和空间分配问题，尤其适

一、布局与盒模型相关特性

弹性布局（Flexbox）
- 用于解决容器内元素的排列、对齐和空间分配问题，尤其适合一维布局（水平/垂直方向）。
- 关键属性：display: flex、flex-direction、justify-content、align-items、flex-wrap、flex-grow 等。
网格布局（Grid）
- 二维布局系统，可精确控制行列尺寸和元素位置，适合复杂页面布局。
- 关键属性：display: grid、grid-template-columns、grid-template-rows、grid-gap、grid-template-areas 等。
盒模型增强（Box Sizing）
- box-sizing: border-box：将内边距和边框纳入元素宽度/高度计算，避免布局偏移。
多列布局（Multi-column Layout）
- column-count、column-gap、column-rule：实现文本内容的多列排版，类似报纸布局。

二、选择器扩展

属性选择器
- 按元素属性名或属性值匹配，如：
  - [class^="item"]：类名以 "item" 开头的元素
  - [href$=".pdf"]：链接地址以 ".pdf" 结尾的元素
  - [data-type="primary"]：自定义属性 data-type 值为 "primary" 的元素
结构伪类选择器
- 基于元素在文档中的位置或状态选择，如：
  - :first-child、:last-child、:nth-child(n)：子元素位置
  - :first-of-type、:last-of-type、:nth-of-type(n)：同类型子元素位置
  - :empty：没有子元素的空元素
  - :target：当前激活的锚点元素
UI 状态伪类
- 匹配元素的交互状态，如：
  - :hover、:active、:focus
  - :checked（单选框/复选框选中状态）
  - :disabled、:enabled（表单元素禁用/可用状态）

三、视觉效果与样式增强

圆角（Border Radius）
- border-radius：为元素添加圆角，如 border-radius: 5px（圆角）、border-radius: 50%（圆形）。
阴影效果
- 盒子阴影：box-shadow: h-shadow v-shadow blur spread color inset
  例：box-shadow: 2px 2px 10px rgba(0,0,0,0.2)（外阴影）
- 文本阴影：text-shadow: h-shadow v-shadow blur color
  例：text-shadow: 1px 1px 2px #000
渐变（Gradients）
- 线性渐变：linear-gradient(direction, color-stop1, color-stop2, ...)
  例：background: linear-gradient(to right, #f00, #00f)（红到蓝水平渐变）
- 径向渐变：radial-gradient(shape size at position, start-color, ..., last-color)
  例：background: radial-gradient(circle, #fff, #000)（圆心白到边缘黑）
透明度（Opacity）
- opacity: 0.5：设置元素透明度（0 完全透明，1 完全不透明），等价于 rgba(r,g,b,a) 中的 a 通道。
背景与边框增强
- 多背景图：background-image: url(img1.jpg), url(img2.png);
- 背景尺寸：background-size: cover（覆盖容器）、contain（包含于容器）
- 边框图片：border-image: url(border.png) 30 round（用图片作为边框）

四、动画与过渡效果

过渡（Transitions）
- 平滑改变样式值，如悬停时元素颜色渐变：
```
div {
  transition: background-color 0.3s ease;
}
div:hover {
  background-color: red;
}
```
- 常用属性：transition-property、transition-duration、transition-timing-function、transition-delay。
动画（Animations）
- 通过 @keyframes 定义关键帧，实现复杂动画效果：
```
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
div {
  animation: pulse 2s infinite;
}
```
- 常用属性：animation-name、animation-duration、animation-iteration-count、animation-timing-function。
变换（Transforms）
- 对元素进行旋转、缩放、平移、倾斜等操作：
  - transform: rotate(45deg)（旋转 45 度）
  - transform: scale(1.5)（放大 1.5 倍）
  - transform: translate(10px, 20px)（水平移动 10px，垂直移动 20px）
  - transform: skew(10deg, 5deg)（水平倾斜 10 度，垂直倾斜 5 度）
- transform-origin：设置变换的基准点（默认中心）。

五、字体与文本特性

@font-face 自定义字体

引入外部字体文件，实现网页字体个性化：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}
div {
  font-family: 'MyFont', sans-serif;
}

文本溢出处理
- text-overflow: ellipsis：配合 white-space: nowrap 和 overflow: hidden，实现文本省略号显示。
文本换行控制
- word-break: break-all（强制换行）、word-wrap: break-word（长单词自动换行）。
垂直对齐（Vertical Align）
- 增强内联元素的垂直对齐控制，如 vertical-align: middle。

六、其他实用特性

媒体查询（Media Queries）
- 针对不同设备尺寸、屏幕方向等条件应用样式，是响应式设计的核心：
```
@media (max-width: 768px) {
  body { font-size: 14px; }
}
```
计算属性（calc()）
- 动态计算样式值，如：width: calc(100% - 200px)（宽度为容器宽度减 200px）。

变量（CSS Variables）

通过 --var-name 定义变量，var(--var-name) 引用，提升样式复用性：

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}
button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

多列文本布局
- column-count、column-gap、column-rule：将文本内容分为多列显示，类似报纸排版。
滤镜（Filters）
- 对元素添加视觉效果，如模糊、灰度、阴影等：
  - filter: blur(5px)（模糊）
  - filter: grayscale(100%)（灰度）
  - filter: drop-shadow(3px 3px 5px #000)（投影）

七、CSS3 特性的浏览器兼容性

部分特性（如 flexbox、grid）在旧版浏览器中需要添加 厂商前缀（如 -webkit-、-moz-）。
可通过工具（如 PostCSS、Autoprefixer）自动添加前缀，或使用 CSS 预处理器（Sass/Less）提升开发效率。

CSS3 的新特性极大地减少了对 JavaScript 和图片的依赖，让前端开发者能够用更简洁的代码实现丰富的视觉效果和布局需求。在实际项目中，合理运用这些特性可以提升页面性能和用户体验。