几个 CSS 小技巧

最近在为项目添加一个首页，写了一堆 HTML 和 CSS，不过总算是一天给搞定了，上级也比较满意。

在实现的过程中，也发现了几个平时没有考虑过的 CSS 技巧，在这里算记录也算是分享吧

渐变

首先还是简单介绍一下 CSS 渐变:

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

咱们这就只考虑线性渐变的实现吧。

背景渐变

background-image: linear-gradient(
          25deg,
          #00d561,
          #5acd98,
          #78c4cc,
          #88baff
        );

背景的渐变，比较简单，利用 background-image 设置线性渐变即可。

文字渐变

参考：渐变文字效果实现

这里我做的一个需求是想给 icon 加上渐变色，所以光背景渐变，看起来不是那么漂亮。所以需求来了，如何实现文字渐变呢？

先介绍 2 个 CSS 属性

• background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
• text-fill-color。从字面意思理解，直译就是文本填充颜色，其实它与 color 的作用是一样的，为文字设定颜色值。但权重要比 color 高

background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;

设置 background-clip:text 后，然后设置 color 或者 -webkit-text-fill-color 为透明色，则可以实现文字渐变了

禁止换行

这个应该算是基础的了，只不过有时候在写 CSS 的时候容易忘掉。比如说一行 tag 希望单行展示，不希望因为容器大小导致换行，样式就乱了。

这里写出来，还是希望注意这点。

white-space:nowrap;

溢出不换行，出现省略号

这个应该是最常见也是最重要的功能了，大多数时候咱们可不想因为不定长的文字导致页面布局丑陋。

对于超过预定容器宽度的文字，最简单的办法是通过设置 overflow 来解决：

overflow:hidden;

但，这种方法用户体验太差了，所以有了溢出显示省略号的实现：

overflow: hidden;
// 显示省略号
text-overflow:ellipsis;
white-space: nowrap;

flex 下如何实现

上面这个应该多数人都知道，但我这里碰到的一个问题是，容器不是定宽的，而是基于 Flex 布局的不定宽容器，这时候如果这样设置，效果如下：

解决方案就是给 flex 布局的子类设置 min-width: 0 即可

这里需要注意 flex-child 中是存在子元素的，文字的直接父类并不是 flex child

.flex-child {
  flex:1;
  min-width: 0;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

全部的 demo 都可以在 👉👉: demo

参考

• https://codepen.io/aj-foster/full/emBYPW
• https://css-tricks.com/flexbox-truncated-text/