12个值得收藏的 CSS 技巧！！-猿码集

CSS 是前端开发中不可或缺的一部分，它可以实现网站页面的样式、布局等，为用户提供更好的浏览体验。本文将为您介绍 12 个值得收藏的 CSS 技巧，在实际开发中可以帮助您提高工作效率，实现更出色的页面效果。

1. 使用 calc() 实现自适应布局

通过 calc() 函数，我们可以在 CSS 中进行数学运算，比如计算网格布局每一列的实际宽度。假设我们希望一个网格布局中，每一列的宽度为其父元素宽度的三分之一减去 10 像素，可以使用如下代码实现。


.grid {
  display: grid;
  grid-template-columns: calc(33.33% - 10px) calc(33.33% - 10px) calc(33.33% - 10px);
}

此时，每一列的宽度将自适应其父元素的宽度，并且减去了 10 像素的间隔。

2. 实现弹性盒子布局

弹性盒子布局（Flexbox）是 CSS3 中新增的一种布局方式，它可以让容器内的项目具备灵活性和自适应性，使得页面布局更加简洁、合理。我们可以通过 display 属性来设置容器为一个弹性盒子，并设置其子元素的排列方式。


.container {
  display: flex;
  flex-direction: row; /* 主轴方向为水平 */
  justify-content: center; /* 子元素水平居中 */
  align-items: center; /* 子元素垂直居中 */
}

此时，.container 内部的子元素将基于主轴和交叉轴进行排列。

2.1. 实现自适应比例宽高

我们可以通过设置子元素的 flex 属性实现自适应比例宽高。比如，.box1 的宽度为 .container 的 1/3，.box2 的宽度为 .container 的 2/3。


.box1 {
  flex: 1;
}
.box2 {
  flex: 2;
}

此时，.box1 的宽度将占据 .container 的 1/3，.box2 的宽度将占据 .container 的 2/3。

3. 实现背景渐变

渐变背景可以让页面更加生动有趣，针对不同的需求，我们可以使用不同类型的渐变。比如，线性渐变（Linear Gradient）可以实现色彩逐渐变化的效果。


.gradient {
  background: linear-gradient(to right, #ff8a00, #da1b60);
}

此时，.gradient 的背景将从左至右呈现 ff8a00 到 da1b60 的渐变。

3.1. 实现径向渐变

另外一种渐变形式是径向渐变（Radial Gradient），它可以实现由中间向四周扩散的效果。


.gradient {
  background: radial-gradient(circle, #ffb3ba, #ffdfba);
}

此时，.gradient 的背景将呈现一个圆形，其颜色由中心往外逐渐过渡，最终呈现 ffdfba 的颜色。

4. 使用 CSS 变量

CSS 变量可以实现样式的复用和统一，减少重复的代码。我们可以通过 var() 函数来使用 CSS 变量。


:root {
  --primary-color: #ff8a00;
  --secondary-color: #da1b60;
}
.btn {
  background: var(--primary-color);
  color: var(--secondary-color);
}

此时，.btn 的背景颜色将使用 --primary-color 变量，文字颜色将使用 --secondary-color 变量。

5. 实现多行文本溢出省略号

在实际开发中，我们有时需要将多行文本进行省略号处理，以避免页面过于拥挤。这时候，CSS3 提供了 text-overflow 属性来解决这个问题。


.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示三行文字 */
  overflow: hidden;
  text-overflow: ellipsis;
}

此时，.ellipsis 内的文字将最多显示 3 行，超出部分将以省略号表示。

5.1. 实现单行省略号

另外，我们也可以使用 white-space 属性来实现单行省略号。


.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

此时，.ellipsis 内的单行文本将以省略号方式显示。

6. 实现卡片效果

卡片效果可以让页面具有更好的层次感和视觉效果。我们可以通过阴影和边框实现简单的卡片效果。


.card {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  border: 1px solid #eee;
}

此时，.card 具有一个简单的卡片效果，其阴影和边框可以根据实际需求进行调整。

7. 设置固定宽高比

在实际开发中，我们有时需要对图片、视频等元素设置固定的宽高比。这时候，我们可以使用 padding 属性来实现。


.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  height: 0;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

此时，.video 元素具有一个 16:9 的宽高比。

8. 实现平滑过渡效果

CSS3 提供了 transition 属性，我们可以通过它来实现平滑过渡效果。比如，我们可以设置 a 标签的颜色在鼠标悬停时逐渐变化。


a {
  color: #333;
  transition: color .3s ease;
}
a:hover {
  color: #da1b60;
}

此时，a 标签颜色将在 0.3 秒内由 #333 逐渐过渡到 #da1b60。

9. 实现文字阴影效果

文字阴影可以让页面中的文字更加突出，更能吸引用户的注意。我们可以使用 text-shadow 属性来实现文字阴影。


h1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

此时，h1 元素中的文本将有一个淡淡的阴影效果。

10. 实现粗体链接修改

在网页中，链接是经常使用的元素之一，我们可以通过设置 a 标签的 font-weight 属性来实现粗体链接。


a {
  font-weight: 600;
}

此时，a 标签中的文本将具有一定的粗体效果。

11. 实现形状变换

CSS3 提供了 transform 属性，我们可以通过它来实现元素的形状变换。比如，我们可以将一个正方形变为一个菱形。


.square {
  width: 100px;
  height: 100px;
  background-color: #da1b60;
  transform: rotate(45deg);
}

此时，.square 元素将呈现一个菱形的形状。

12. 实现透明度效果

透明度效果可以让页面元素具有更好的层次感和视觉效果。我们可以通过 opacity 属性来设置元素的透明度。


.box {
  opacity: 0.5;
}

此时，.box 元素将呈现一个半透明的效果。

综上所述，以上12个 CSS 技巧在实际开发中具有重要的应用价值，它们可以帮助我们实现更出色的页面效果。我们应该在实际开发中积累经验，不断提高自己的技能水平。

12个值得收藏的 CSS 技巧！！