新人求关注?，点击右上角 ↗? 关注，博主日更，全年无休，您的关注是我的最大的更新的动力～ 感谢大家了

这里有10个CSS技巧，让你的写的 CSS 起飞

1. CSS变量

这不完全是一个设计技巧，但当你试图构建可重复使用的内容并且需要跟踪你的颜色时，CSS变量非常有用。一旦需要，你可以立刻在所有地方更改这些颜色。

:root {
  --main-color: #3498db; /* Blue */
}

body {
  background-color: var(--main-color);
}

button {
  background-color: var(--main-color);
}

2. 盒子阴影

为按钮和盒子添加阴影，可以让它们看起来仿佛从页面中弹出来。

这就像为你的网站增加了一点3D效果。

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Shadow */
}

3. 文本阴影

为文本添加柔和的阴影可以让它更加突出。

这样不仅仅通过颜色或字体大小，还能通过阴影将标题与普通文本区分开来。

h1 {
  font-size: 36px;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow */
}

4. CSS渐变

与其使用纯色，不如使用渐变将两种或多种颜色混合在一起。

.gradient-bg {
  height: 300px;
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from orange to pink */
}

5. 悬停动画

当有人将鼠标悬停在按钮或链接上时，你可以让它变大、旋转、改变外观或移动。

button {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

button:hover {
  transform: scale(1.1); /* Grow on hover */
}

6. Flexbox和Grid布局

Flexbox和Grid是安排页面元素的强大工具。

.flex-container {
  display: flex;
  justify-content: space-around; /* Space items evenly */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 10px; /* Gap between items */
}

.item {
  background-color: #f0f0f0;
  padding: 20px; /* Padding for items */
}

7. 剪切路径（Clip-Path）

使用clip-path，你可以从图像和盒子中裁剪出圆形或星形等形状。

.circle {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  clip-path: circle(50% at 50%, 50%); /* Circle shape */
}

8. CSS混合模式

混合模式允许你以不同方式混合颜色和图像。

.blend-container {
  position: relative;
}

.blend-image {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply; /* Blends the image with background */
}

9. 自定义光标让页面更有趣

当鼠标悬停在网站的某些部分时，可以将光标更改为特别的样式。

.custom-cursor {
  cursor: url('cursor-icon.png'), auto; /* Custom cursor */
}

10. CSS滤镜

滤镜可以让你的图片呈现不同的效果，比如将其变为黑白或添加模糊效果。

.filtered-image {
  width: 100%;
  filter: grayscale(100%) blur(2px); /* Black and white with blur */
}

小结

欢迎留言评论，大家一起探讨，一起进步～ 欢迎点赞、关注?、转发～

求关注～全年无休日更~ 求关注～