10 个实用的 CSS 代码片段分享

在网页设计和开发中，CSS（层叠样式表）是不可或缺的一部分。它赋予网页独特的外观和风格，让用户能够获得更好的视觉体验。以下是 10 个实用的 CSS 代码片段，希望能对您有所帮助。

1. 平滑滚动效果

html {
  scroll-behavior: smooth;
}

这行代码能让页面滚动更加平滑，提升用户体验。

2. 隐藏滚动条

::-webkit-scrollbar {
  display: none;
}

如果您想要隐藏滚动条，使用这段代码即可。

3. 文字阴影

p {
  text-shadow: 2px 2px 4px #000000;
}

给文字添加阴影，使其更具立体感。

4. 鼠标悬停效果

button:hover {
  background-color: #007bff;
  color: #fff;
}

当鼠标悬停在按钮上时，改变其背景色和文字颜色。

5. 圆形图片

img {
  border-radius: 50%;
}

将图片变成圆形，增加美观度。

6. 响应式布局

@media (max-width: 768px) {
 .container {
    width: 100%;
  }
}

根据不同的屏幕宽度调整布局。

7. 清除浮动

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

解决元素浮动带来的布局问题。

8. 渐变背景

body {
  background: linear-gradient(to bottom right, #00bfff, #ff6600);
}

为页面设置渐变背景，使其更加独特。

9. 盒阴影

.box {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

给元素添加盒阴影，增强立体感。

10. 文字换行

p {
  word-wrap: break-word;
}

当文字长度超出容器时，自动换行。

以上这些 CSS 代码片段在实际开发中非常实用，能够帮助您轻松实现各种常见的效果和布局需求。不断探索和实践，您将能够更加熟练地运用 CSS 打造出精美而富有创意的网页。