css制作效果

CSS 制作常见效果的方法

阴影效果
使用 box-shadow 属性为元素添加阴影：

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

参数依次为水平偏移、垂直偏移、模糊半径和颜色。

渐变背景
使用 linear-gradient 或 radial-gradient 创建渐变背景：

.gradient {
  background: linear-gradient(to right, #ff9966, #ff5e62);
}

动画效果
通过 @keyframes 和 animation 实现动画：

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

悬停交互
使用 :hover 伪类实现悬停效果：

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

圆角与边框
通过 border-radius 和 border 美化元素：

.card {
  border-radius: 10px;
  border: 1px solid #ddd;
}

响应式设计
使用媒体查询适配不同设备：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

过渡效果
通过 transition 平滑属性变化：

.link {
  transition: color 0.3s ease;
}
.link:hover {
  color: #ff0000;
}

3D 变换
利用 transform 实现 3D 效果：

.cube {
  transform: rotateY(45deg);
}

文本特效
使用 text-shadow 增强文字表现力：

.title {
  text-shadow: 2px 2px 4px #000;
}

自定义滚动条
通过伪元素美化滚动条（仅限 WebKit 内核）：

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