纯css制作
纯 CSS 制作常见效果的方法
居中元素
水平居中可以通过 margin: 0 auto 实现，适用于块级元素。垂直居中可以使用 Flexbox 或 Grid 布局。Flexbox 方法是在父容器设置 display: flex 和 align-items: center，子元素自动垂直居中。
.parent {
display: flex;
align-items: center;
justify-content: center;
}响应式布局
使用媒体查询（Media Queries）可以根据屏幕尺寸调整样式。例如，在屏幕宽度小于 768px 时改变布局：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}动画效果
CSS 动画通过 @keyframes 定义，再通过 animation 属性应用到元素上。例如创建一个淡入效果：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease-in;
}悬停效果
利用 :hover 伪类可以创建交互效果。例如按钮悬停时改变背景色：
.button {
background: blue;
transition: background 0.3s;
}
.button:hover {
background: darkblue;
}自定义复选框
隐藏原生复选框，用伪元素创建自定义样式：
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
}
input[type="checkbox"]:checked + label::before {
background: green;
}工具提示（Tooltip）
通过伪元素和 :hover 实现简单的工具提示：
.tooltip {
position: relative;
}
.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 5px;
border-radius: 5px;
}渐变背景
使用 linear-gradient 创建渐变背景：
.gradient {
background: linear-gradient(to right, #ff9966, #ff5e62);
}阴影效果
box-shadow 属性可以为元素添加阴影：
.shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}圆角边框
border-radius 属性可以创建圆角：
.rounded {
border-radius: 10px;
}网格布局
CSS Grid 可以创建复杂的网格布局：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}这些方法展示了纯 CSS 的强大功能，无需 JavaScript 即可实现丰富的视觉效果和交互体验。
