目录
- CSS3 简介
- CSS3 新特性概览
- 实战案例解析 3.1 响应式设计 3.2 文本效果 3.3 动画与过渡 3.4 图形绘制 3.5 高级特性应用
- 总结
1. CSS3 简介
CSS3 是层叠样式表（Cascading Style Sheets）的最新版本，它扩展了CSS的样式和布局能力，使得网页设计更加丰富和动态。CSS3 引入了许多新特性和功能，包括动画、过渡、媒体查询、自定义字体、阴影、渐变等。
2. CSS3 新特性概览
- 动画与过渡：通过CSS3的
@keyframes规则，可以轻松实现复杂的动画效果，如平滑的过渡、动态的背景等。 - 媒体查询：允许根据不同的设备和屏幕尺寸应用不同的样式，实现响应式设计。
- 自定义字体：使用
@font-face规则，可以嵌入自定义字体，丰富网页的文本风格。 - 阴影、渐变：为元素添加阴影和渐变效果，增强视觉层次感。
- 图形绘制：使用
border-radius、box-shadow等属性，可以绘制各种形状和效果。
3. 实战案例解析
3.1 响应式设计
响应式设计是现代网页设计的关键，以下是一个简单的响应式布局示例：
<!DOCTYPE html>
<html>
<head>
<style>
@media (max-width: 600px) {
.container {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>响应式布局</h1>
<p>这是一个响应式布局的示例。</p>
</div>
</body>
</html>
3.2 文本效果
以下是一个使用CSS3文本阴影和描边的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.text-shadow {
text-shadow: 2px 2px 4px #000000;
}
.text-stroke {
-webkit-text-stroke: 2px #f00;
color: transparent;
}
</style>
</head>
<body>
<h1 class="text-shadow">文本阴影</h1>
<p class="text-stroke">文本描边</p>
</body>
</html>
3.3 动画与过渡
以下是一个简单的CSS3过渡效果示例：
<!DOCTYPE html>
<html>
<head>
<style>
.button {
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #f00;
}
</style>
</head>
<body>
<button class="button">鼠标悬停</button>
</body>
</html>
3.4 图形绘制
以下是一个使用CSS3绘制三角形的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid #f00;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
3.5 高级特性应用
CSS3的高级特性，如@font-face、background-size等，可以用于创建更加丰富和动态的网页效果。以下是一个使用@font-face的示例：
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff');
}
.font {
font-family: 'MyFont', sans-serif;
}
</style>
</head>
<body>
<h1 class="font">使用自定义字体</h1>
</body>
</html>
4. 总结
CSS3 为现代网页设计提供了丰富的功能和特性，通过上述实战案例，我们可以看到CSS3的魅力。掌握CSS3，可以帮助我们创建更加美观、动态和交互性强的网页。