几个 CSS 小技巧

本贴最后更新于 1400 天前,其中的信息可能已经时异事殊

最近在为项目添加一个首页,写了一堆 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 设置线性渐变即可。

image-20200820153103023

文字渐变

参考:渐变文字效果实现

这里我做的一个需求是想给 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 为透明色,则可以实现文字渐变了

image-20200820154525435

禁止换行

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

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

white-space:nowrap;

溢出不换行,出现省略号

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

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

overflow:hidden;

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

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

image-20200820162617695

flex 下如何实现

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

image-20200820163505500

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

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

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

image-20200820165941450


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

参考


  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    184 引用 • 458 回帖 • 4 关注
  • 换行
    2 引用 • 1 回帖
  • 渐变
    1 引用 • 1 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • W25020535

    哇,一直都没注意过这些,这个技巧很实用的!感谢分享!!!