css制作代码大全

CSS 常用代码大全

基础样式设置

设置字体、颜色、背景等基础样式：

body {
  font-family: 'Arial', sans-serif;
  color: #333;
  background-color: #f5f5f5;
  line-height: 1.6;
}

盒模型与布局

控制元素尺寸、边距和布局方式：

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

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

文本样式

文本修饰与排版控制：

h1 {
  font-size: 2.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

p {
  text-indent: 2em;
  word-spacing: 0.2em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

背景效果

创建渐变、图案背景：

.header {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  background-image: url('pattern.png');
  background-size: cover;
  background-attachment: fixed;
}

边框与阴影

添加装饰性边框效果：

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  outline: 2px dashed rgba(0,0,0,0.05);
}

过渡与动画

创建平滑的交互效果：

.button {
  transition: all 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s forwards;
}

响应式设计

媒体查询适配不同设备：

@media (max-width: 768px) {
  .menu {
    display: none;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

变换效果

2D/3D变换操作：

.icon {
  transform: rotate(45deg) scale(1.2);
}

.card-3d {
  transform: perspective(1000px) rotateY(20deg);
}

伪类与伪元素

特殊状态样式控制：

a:hover {
  color: #ff6b6b;
  text-decoration: underline;
}

li::before {
  content: "•";
  color: #4ecdc4;
  margin-right: 10px;
}

网格布局

创建复杂网格系统：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  align-items: stretch;
}

Flexbox布局

弹性盒模型实现：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}

自定义变量

使用CSS变量统一管理样式：

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.element {
  color: var(--primary-color);
  margin: var(--spacing-unit);
}

滤镜效果

图像视觉处理：

.image {
  filter: blur(2px) brightness(0.8) contrast(1.2);
  backdrop-filter: blur(5px);
}

滚动行为

自定义滚动效果：

.scroll-container {
  scroll-behavior: smooth;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

打印样式

优化打印输出的样式：

@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
    color: black;
  }
}