工作中常用且容易遗忘的 CSS 样式清单整理

/* 使用CSS进行布局时，可以利用Flexbox来简化操作 */
.container {
  display: flex; /* 开启Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 自动换行 */
}
 
/* 使文本在容器内自适应大小 */
.text-container {
  word-wrap: break-word; /* 在长单词或URL地址中正确换行 */
  overflow-wrap: break-word; /* 对于旧浏览器的兼容性 */
}
 
/* 创建一个圆形图片 */
.img-circle {
  width: 100px; /* 设置图片宽度 */
  height: 100px; /* 设置图片高度 */
  border-radius: 50%; /* 将图片设为圆形 */
}
 
/* 使用伪元素添加内容到元素前后 */
.element::before,
.element::after {
  content: ""; /* 使伪元素生效 */
  display: block; /* 或inline, inline-block等 */
  width: 50px; /* 设置宽度 */
  height: 50px; /* 设置高度 */
  background-color: red; /* 设置背景颜色 */
}
 
/* 使用CSS创建一个三角形 */
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 100px; /* 上下的三角形大小 */
  border-color: transparent transparent blue transparent; /* 上边框透明，左右透明，下边框蓝色，右边框透明 */
}
 
/* 使用CSS创建一个渐变背景 */
.gradient-background {
  background: linear-gradient(to right, red, yellow); /* 从左到右的红到黄渐变 */
}
 
/* 使用CSS实现模态对话框效果 */
.modal {
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  width: 100%; /* 全屏宽度 */
  height: 100%; /* 全屏高度 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: none; /* 默认不显示 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  z-index: 10; /* 置于其他内容之上 */
}
 
.modal.active {
  display: flex; /* 当激活时显示模态框 */
}
 
/* 使用CSS实现圆角效果 */
.rounded-corners {
  border-radius: 10px; /* 设置圆角大小 */
}
 
/* 使用CSS实现阴影效果 */
.shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
 
/* 使用CSS实现1px线的效果 */
.one-pixel-line {
  border-top: 1px solid #ccc; /* 上边框 */
}
 
/* 使用CSS实现圆角图片 */
.img-rounded {
  border-radius: 100px; /* 将图片设为圆形 */
}
 
/* 使用CSS实现文字溢出时显示省略号 */
.text-overflow {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}
 
/* 使用CSS实