利用css制作

CSS制作常见效果的方法

居中元素

水平居中一个块级元素可以使用margin: 0 auto，垂直居中可以使用Flexbox或Grid布局。Flexbox方案如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

响应式布局

使用媒体查询根据不同屏幕尺寸调整样式：

@media (max-width: 768px) {
  .element {
    width: 100%;
  }
}

动画效果

CSS动画通过@keyframes和animation属性实现：

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.element {
  animation: slide 2s infinite alternate;
}

悬停效果

:hover伪类常用于交互效果：

.button:hover {
  background-color: #555;
  transform: scale(1.05);
}

阴影和圆角

box-shadow和border-radius快速美化元素：

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

渐变背景

线性渐变创建彩色背景：

.header {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

自定义滚动条

::-webkit-scrollbar伪元素定制滚动条：

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #888;
}

暗黑模式

通过CSS变量和媒体查询实现主题切换：

:root {
  --bg-color: white;
  --text-color: black;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222;
    --text-color: white;
  }
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}