你平时有收藏哪些常用的css代码片断？

在前端开发中，CSS代码片段可以极大地提高我们的工作效率。以下是一些我常用的CSS代码片段：

1. 清除默认样式：
   用于消除浏览器默认样式的影响，确保页面在不同浏览器中具有一致的外观。

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

2. Flexbox布局：
   Flexbox是一种强大的布局模式，可以轻松实现各种复杂的布局。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 垂直排列子元素 */
}

3. 文本截断：
   当文本超出容器宽度时，显示省略号。

.text-truncate {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

4. CSS变量：
   使用CSS变量可以方便地管理和修改主题颜色、字体大小等样式。

:root {
  --primary-color: #3498db;
  --secondary-color: #e67e22;
  --font-size: 16px;
}

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

5. 响应式布局：
   使用媒体查询实现响应式布局，使页面在不同设备上都能良好地显示。

@media (max-width: 768px) {
  /* 在宽度小于768px的设备上应用以下样式 */
  .container {
    flex-direction: column; /* 垂直排列子元素 */
  }
}

6. 渐变背景：
   使用线性渐变或径向渐变创建吸引人的背景效果。

body {
  background: linear-gradient(to right, #ff9966, #ff5e62); /* 线性渐变 */
  /* background: radial-gradient(circle, #ff9966, #ff5e62); /* 径向渐变 */ */
}

7. 阴影效果：
   为元素添加阴影效果，增强立体感。

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 盒子阴影 */
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */ */
}

8. 动画效果：
   使用CSS动画为页面添加动态效果，提升用户体验。

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {
  animation: spin 2s linear infinite; /* 应用动画 */
}