CSS3 属性详解手册

🎨 CSS3 属性详解手册

一、动画（Animation） — CSS3

用于创建关键帧动画。

✅ 完整示例：

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
.box {
  width: 100px;
  height: 100px;
  background: #007bff;
  animation: pulse 1s ease-in-out infinite;
}

二、背景（Background） — CSS1/3

✅ 响应式背景示例：

.hero {
  height: 100vh;
  background: url(hero.jpg) no-repeat center/cover fixed;
  /* 等价于：
     background-image: url(hero.jpg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     background-attachment: fixed; */
}

三、边框与轮廓（Border & Outline） — CSS1/2/3

边框（Border）

轮廓（Outline）

✅ 圆角+阴影示例：

.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px; /* 四角圆润 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 柔和阴影 */
  padding: 20px;
}

四、盒子模型（Box Model） — CSS1/2/3

✅ 推荐重置盒模型：

*, *::before, *::after {
  box-sizing: border-box; /* width/height 包含 padding 和 border */
}

五、弹性盒子（Flexbox） — CSS3

用于一维布局（行或列）

容器属性

子项属性

✅ 经典居中：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;
}

六、网格布局（Grid） — CSS3

用于二维布局（行+列）

容器属性

子项属性

✅ 响应式网格：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自适应列宽，最小250px */
  gap: 16px;
}

七、文本（Text） — CSS1/2/3

✅ 省略号截断：

.ellipsis {
  white-space: nowrap;      /* 不换行 */
  overflow: hidden;         /* 隐藏溢出 */
  text-overflow: ellipsis;  /* 显示省略号 */
  width: 200px;             /* 需要固定宽度 */
}

八、过渡（Transition） — CSS3

用于在状态变化时添加平滑效果。

✅ 悬停放大：

.btn {
  background: #007bff;
  padding: 10px 20px;
  transition: transform 0.2s ease; /* transform 属性 0.2秒 ease 曲线 */
}
.btn:hover {
  transform: scale(1.05); /* 悬停时放大1.05倍 */
}

九、2D/3D 变换（Transform） — CSS3

✅ 3D 翻转卡片：

.card {
  perspective: 1000px; /* 设置透视距离 */
  width: 200px;
  height: 300px;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 保持3D空间 */
}
.card:hover .card-inner {
  transform: rotateY(180deg); /* 水平翻转 */
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
}
.card-back {
  transform: rotateY(180deg); /* 背面初始旋转180度 */
}

十、多列布局（Multi-column） — CSS3

✅ 报纸风格：

.news {
  column-count: 3;          /* 分为3列 */
  column-gap: 20px;         /* 列间距20px */
  column-rule: 1px solid #eee; /* 列间线 */
}
.news h2 {
  column-span: all;         /* 标题横跨所有列 */
  text-align: center;
}

十一、用户界面（UI） — CSS3

✅ 自定义输入框：

input[type="range"] {
  appearance: none;           /* 移除默认样式 */
  width: 100%;
  height: 5px;
  background: #ddd;
  border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;           /* 移除滑块默认样式 */
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

十二、表格（Table） — CSS2

⚠️ 已废弃或极少使用的属性（避免使用）

• rotation, rotation-point（未被广泛支持）
• marquee-*（跑马灯，已被淘汰）
• voice-*（语音合成，仅限特定设备）
• bookmark-*, string-set（主要用于打印/PDF）

✅ 最佳实践建议

1. 优先使用 flex 和 grid 布局，替代浮动和定位 hack。
2. 动画尽量用 transform 和 opacity，避免触发布局重排。
3. 使用 rem/em 适配字体，%/vw/vh 适配容器。
4. 为交互元素添加 :focus 样式，提升无障碍体验。
5. 慎用 !important，优先通过选择器权重解决样式冲突。

📌 此文档可作为前端开发日常参考。建议结合 MDN Web Docs 查阅最新兼容性。