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

这里有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 */}

小结

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

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