Ceryn

CSS3

10分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS：层叠样式表 | MDN

CSS 参考手册

Can I use

引入

CSS3 不是一个单独的属性，而是 CSS 发展到现代阶段后的一组新能力。

它让网页不只可以设置颜色和文字，还可以做圆角、阴影、动画、响应式布局等更丰富的效果。

正文

定义

定义

CSS3 是 CSS 的一个重要发展阶段，引入了很多新的样式能力，例如选择器、圆角、阴影、渐变、过渡、动画、弹性布局和媒体查询等。

早期 CSS 更偏向基础样式，例如文字颜色、背景颜色、边距。

CSS3 增加了很多更适合现代网页的功能，让很多以前需要图片或 JavaScript 才能完成的效果，可以直接用 CSS 实现。

现在学习 CSS 时，很多常用内容其实已经属于 CSS3 或现代 CSS 的一部分。

常见新特性

类型常见内容作用
选择器属性选择器、伪类、伪元素更精确地选中元素
盒子效果border-radius、box-shadow做圆角和阴影
背景效果多背景、背景尺寸、渐变做更丰富的背景
文本效果text-shadow、换行控制控制文字显示细节
变形transform控制元素旋转、缩放、移动
过渡transition让样式变化更平滑
动画animation、@keyframes做持续或复杂动画
布局flex、grid解决元素怎么排列的问题
响应式@media适配不同屏幕尺寸

圆角 border-radius

border-radius 用于设置元素圆角。

.card {
  border-radius: 12px;
}

它常用于按钮、卡片、头像、输入框等元素。

<button class="btn">提交</button>
.btn {
  padding: 8px 16px;
  border-radius: 999px;
  background-color: #2563eb;
  color: white;
}

border-radius: 999px; 常用于做胶囊按钮。

阴影 box-shadow

box-shadow 用于给元素添加盒子阴影。

.card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

常见结构：

box-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

例如：

.panel {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

阴影可以让卡片从背景中浮出来，但不要太重，否则页面会显得很脏。

文字阴影 text-shadow

text-shadow 用于给文字添加阴影。

.title {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

它常用于海报标题、图片上的文字、特殊视觉效果。

普通正文一般不建议加文字阴影，会影响阅读。

渐变背景

CSS3 支持渐变背景，可以不用图片就做出颜色过渡。

常见写法是 linear-gradient()。

.banner {
  background: linear-gradient(135deg, #2563eb, #9333ea);
}

这个例子会生成一个从蓝色到紫色的渐变背景。

渐变常用于按钮、横幅、卡片背景等场景。

变形 transform

transform 用于改变元素的形状或位置。

它不会像普通文档流那样影响其他元素的位置。

常见函数：

函数作用
translate()移动元素
scale()缩放元素
rotate()旋转元素
skew()倾斜元素
.box {
  transform: translateX(20px);
}
.icon {
  transform: rotate(45deg);
}

transform 很常和 transition 一起使用，做鼠标悬停效果。

过渡 transition

transition 用于让样式变化更平滑。

如果没有过渡，样式变化会瞬间完成。

.btn {
  background-color: #2563eb;
  transition: background-color 0.3s ease;
}
 
.btn:hover {
  background-color: #1d4ed8;
}

鼠标移到按钮上时，背景色会在 0.3s 内慢慢变化。

常见结构：

transition: 属性 持续时间 速度曲线;

例如：

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

这个例子常用于卡片悬停效果。

动画 animation

animation 用于创建更完整的动画效果。

它通常配合 @keyframes 使用。

@keyframes fade-in {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
 
.notice {
  animation: fade-in 0.5s ease;
}

@keyframes 用来定义动画过程。

animation 用来把动画应用到元素上。

常见用途：

  • 淡入淡出
  • 加载动画
  • 提示信息出现
  • 图标轻微动效

弹性布局 flex

flex 用于处理一维布局。

它主要解决元素在一行或一列中怎么排列的问题。

<div class="nav">
  <a href="#">首页</a>
  <a href="#">文章</a>
  <a href="#">关于</a>
</div>
.nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

display: flex; 常用于导航栏、按钮组、卡片列表、左右布局等场景。

网格布局 grid

grid 用于处理二维布局。

它可以同时控制行和列。

<div class="gallery">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

grid 常用于图片墙、仪表盘、复杂页面区域布局。

简单理解：

  • flex 更适合一行或一列
  • grid 更适合行列同时控制

媒体查询 @media

@media 用于根据设备条件应用不同样式。

最常见的是根据屏幕宽度做响应式布局。

.container {
  width: 960px;
}
 
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 16px;
  }
}

这个例子表示：当屏幕宽度不超过 768px 时，.container 使用更适合小屏幕的样式。

媒体查询让同一个网页可以适配电脑、平板、手机等不同设备。

新选择器

CSS3 也增强了选择器能力。

常见内容包括：

例如：

input[type="email"] {
  border-color: #2563eb;
}
 
a:hover {
  color: red;
}
 
li:nth-child(odd) {
  background-color: #f3f4f6;
}

这些选择器可以更精确地选中页面中的元素。

例子

做一个现代卡片

<div class="card">
  <h3>CSS3 卡片</h3>
  <p>使用圆角、阴影和过渡效果。</p>
</div>
.card {
  padding: 24px;
  border-radius: 16px;
  background-color: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

这个例子里用到了 border-radius、box-shadow、transition 和 transform。

鼠标移上去时，卡片会轻微上浮。

做一个响应式列表

<div class="list">
  <div>项目一</div>
  <div>项目二</div>
  <div>项目三</div>
</div>
.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
 
@media (max-width: 768px) {
  .list {
    grid-template-columns: 1fr;
  }
}

大屏幕时显示三列，小屏幕时变成一列。

这就是响应式布局中很常见的写法。

特点

  • CSS3 增加了很多现代网页常用能力
  • border-radius 可以做圆角
  • box-shadow 和 text-shadow 可以做阴影
  • linear-gradient() 可以做渐变背景
  • transform 可以移动、缩放、旋转元素
  • transition 可以让样式变化更平滑
  • animation 可以制作更完整的动画
  • flex 和 grid 让布局更方便
  • @media 可以让网页适配不同屏幕
  • 很多 CSS3 能力已经是现在写 CSS 的基础内容

注意事项

  • CSS3 不是一个具体属性，而是一组现代 CSS 能力
  • 动画和阴影不要滥用，过多会影响页面观感和性能
  • 使用新属性时，可以通过 Can I use 查看浏览器兼容性
  • 做布局时优先理解 CSS 文档流、CSS 盒模型 和 CSS 定位
  • flex 和 grid 很重要，但不要忽略基础选择器和盒模型
  • 响应式设计不是只写 @media，还要考虑内容在不同屏幕上的阅读体验

理解

可以把 CSS3 理解为 CSS 从“基础装饰”走向“现代网页表现”的阶段。

以前很多效果需要切图片或写 JavaScript，现在可以直接用 CSS 做。

例如圆角、阴影、渐变、过渡动画、响应式布局，都是现代页面中很常见的能力。

学习 CSS3 不需要一次记住所有属性，先掌握常见场景：按钮、卡片、导航、列表、响应式布局，再慢慢补充细节。

引出

理解 CSS3 的整体能力之后，可以继续深入学习 CSS Flexbox、CSS Grid、CSS 响应式设计 和 CSS 动画相关内容。

关系图谱

反向链接