CSS（层叠样式表）是一种用于描述HTML或XML（包括各种XML方言，如SVG、MathML或XHTML）文档呈现的样式的语言，CSS描述了在屏幕、纸质、音频等媒体上元素应该如何被渲染的问题，CSS不仅用于设置网页的外观和格式，还可以与JavaScript结合，实现一些动态效果。
以下是一些常见的CSS效果：
1、渐变效果：CSS3引入了渐变效果，可以使用线性渐变或径向渐变来为元素添加颜色过渡效果，可以使用以下代码创建一个从左到右的红色到蓝色渐变的背景：
body {
background: linear-gradient(to right, red, blue);
}
2、阴影效果：CSS3提供了box-shadow属性，可以为元素添加阴影效果，可以使用以下代码为一个div元素添加一个向右下方偏移的灰色阴影：
div {
box-shadow: 5px 5px 10px gray;
}
3、边框圆角效果：CSS3提供了border-radius属性，可以为元素的边框添加圆角效果，可以使用以下代码将一个div元素的四个角都设置为10像素的圆角：
div {
border-radius: 10px;
}
4、动画效果：CSS3引入了动画功能，可以使用@keyframes规则定义动画，然后将其应用到元素上，可以使用以下代码创建一个旋转的动画效果：
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
div {
animation: rotate 2s linear infinite;
}
5、过渡效果：CSS3提供了transition属性，可以为元素的样式变化添加过渡效果，可以使用以下代码为一个div元素的背景颜色变化添加一个0.5秒的过渡效果：
div {
transition: background-color 0.5s;
}
6、变形效果：CSS3提供了transform属性，可以对元素进行缩放、旋转、平移等变形操作，可以使用以下代码将一个div元素旋转45度：
div {
transform: rotate(45deg);
}
7、弹性布局：CSS3引入了flexbox布局模型，可以轻松地实现元素的自适应排列，可以使用以下代码将一个容器内的三个子元素水平排列，并在容器宽度不足时自动换行：
.container {
display: flex;
flex-wrap: wrap;
}
8、网格布局：CSS3引入了grid布局模型，可以轻松地实现复杂的响应式布局，可以使用以下代码将一个容器内的九个格子分为三行三列：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
9、伪类和伪元素：CSS提供了多种伪类和伪元素选择器，可以用于选择和操作特定的元素状态或结构，可以使用以下代码为一个链接在鼠标悬停时改变颜色：
a:hover {
color: red;
}
10、CSS预处理器：CSS预处理器（如Sass、Less等）可以将CSS代码模块化、嵌套化，提高代码的可维护性和复用性，使用Sass可以将以下代码中的重复部分提取到一个变量中：
$primary-color: #3f51b5; $secondary-color: #ff4081; $text-color: #212121; $background-color: #ffffff;
CSS提供了丰富的样式和布局功能，可以实现各种视觉效果和交互效果，通过学习和掌握CSS，我们可以更好地控制网页的外观和行为，提高用户体验。