CSS3本身并不是一种框架，而是一种用于描述网页样式的语言规范。然而，在开发过程中，我们可以使用各种框架来更高效地编写CSS3代码。以下是一些常见的CSS框架，它们可能包含CSS3的特性：
1.Bootstrap：Bootstrap是一个流行的前端框架，它提供了大量的CSS和JS组件，用于快速构建响应式网站和Web应用程序。Bootstrap使用了许多CSS3的特性，如圆角、阴影、渐变和动画等。
2.Foundation：Foundation是另一个强大的前端框架，它提供了一套全面的工具集，用于构建现代化的Web项目。Foundation同样利用了CSS3的特性，提供了丰富的样式和组件。
3.Bulma：Bulma是一个基于Flexbox的轻量级CSS框架，它易于定制和扩展。Bulma利用CSS3的特性，提供了许多现代化的样式和布局选项。
4.Semantic UI：Semantic UI是一个高度可定制的前端框架，它注重自然语言和开发者的使用体验。Semantic UI也使用了CSS3的一些特性，如过渡和动画效果。
5.Materialize：Materialize是一个基于Google的Material Design的CSS框架。它提供了许多预定义的样式和组件，使开发者能够轻松地创建具有现代化外观的网站和应用程序。
这些框架都提供了丰富的CSS样式和组件，可以帮助开发者更高效地构建网站和Web应用程序。同时，它们也都支持CSS3的特性，使开发者能够创建出更加动态和吸引人的网页效果。请注意，这些框架都在不断更新和发展中，因此建议查阅最新的官方文档以获取最新的信息。
1. Bootstrap 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center">Welcome to Bootstrap</h1>
<button class="btn btn-primary">Primary Button</button>
</div>
<!-- 引入Bootstrap JS（如果需要的话） -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
2. Foundation 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Example</title>
<!-- 引入Foundation CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css">
</head>
<body>
<div class="grid-container">
<h1 class="text-center">Welcome to Foundation</h1>
<button class="button primary">Primary Button</button>
</div>
<!-- 引入Foundation JS（如果需要的话） -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
3. Bulma 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma Example</title>
<!-- 引入Bulma CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.2/css/bulma.min.css">
</head>
<body>
<section class="section">
<h1 class="title is-1 has-text-centered">Welcome to Bulma</h1>
<button class="button is-primary">Primary Button</button>
</section>
</body>
</html>
4. Semantic UI 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic UI Example</title>
<!-- 引入Semantic UI CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui container">
<h1 class="ui center aligned header">Welcome to Semantic UI</h1>
<button class="ui primary button">Primary Button</button>
</div>
<!-- 引入Semantic UI JS（如果需要的话） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>
5. Materialize 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Example</title>
<!-- 引入Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<h1 class="center-align">Welcome to Materialize</h1>
<button class="btn btn-large waves-effect waves-light" type="submit" name="action">Large Button</button>
</div>
<!-- 引入Materialize JS（如果需要的话） -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
</script>
</body>
</html>
请注意，这些示例仅展示了如何使用这些框架创建基本的样式和组件。每个框架都有大量的组件和功能，例如导航栏、下拉菜单、卡片、模态框等，您可以在官方文档中找到如何使用这些组件的详细指南。
另外，由于这些框架都在不断更新和演进，我提供的CDN链接可能不是最新的。为了确保您使用的是最新版本的框架，请查阅每个框架的官方网站以获取最新的下载链接和使用说明。