CSS 技巧集合 | 思否技术周刊

时间 2021-03-15

标签 css html 前端 web bootstrap segmentfault 后端前端框架 app 框架栏目 CSS 繁體版

原文原文链接

CSS 是一种用来表现 HTML 或 XML 等文件样式的计算机语言，相信朋友们对它都不陌生，今日给你们整理一个与 CSS 小技巧相关的合集，但愿为你们提供一些设计新思路~css

CSS 有各类玩转的方式，一块儿来看看吧~

一、小技巧！CSS 整块文本溢出省略特性探究

今天的文章颇有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。html

文本超长打点前端

咱们都知道，到今天（2021/03/06），CSS 提供了两种方式便于咱们进行文本超长的打点省略。web

对于单行文本，使用单行省略：bootstrap

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

而对于多行文本的超长省略，使用 -webkit-line-clamp 相关属性，兼容性也已经很是好了：segmentfault

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

CodePen Demo -- inline-block 实现整块的溢出打点后端

https://codepen.io/Chokcoco/p...前端框架

问题一：超长文本整块省略app

问题二：iOS 不支持整块超长溢出打点省略框架

二、原来CSS的background还能够这么玩

身为一个前端开发者，背景是开发中的常客。大到整个网站的主题背景，小到一个按钮的背景。CSS 的 background 属性基本上天天开发都会遇到，绝大多数状况下咱们都只会使用到了纯色背景或者图片背景。若是你想让你开发的内容看起来更加生动有趣，经过本文让你用纯CSS也能够开发出炫酷的背景。

开始以前

在开始以前，先请你回答下面的问题，若是你能所有回答正确，说明你对 background 属性掌握的还不错哦！

1.径向渐变默认形状是什么？

A：原型 B：椭圆形

background 属性的值为多个时，哪一个值的图层在最顶部？

A：第一个值 B：最后一个值

background: green, linear-gradient(red, pink); 效果是什么？

A：绿色背景 B：红粉渐变背景 C：没有背景

当background属性有多个值时，如何指定每层背景的大小？

基础背景

首先仍是先回顾一下基础背景有哪些，最简单的就是纯色背景：

background: pink;

线性渐变，固然你还能够自定义方向：

.linear {
    background: linear-gradient(red, pink);
}
.linear1 {
    background: linear-gradient(145deg, red 20%, pink);
}

径向渐变

background: radial-gradient(red, pink);

角向渐变

background: conic-gradient(red, pink);background: conic-gradient(red, pink);background: radial-gradient(red, pink);

基础背景扩展

纯色背景就没什么可说的了，只能改变颜色。

一、线性背景

二、径向背景

三、角向渐变

四、组合背景

三、使用这些 CSS 属性，布局效率又提升了一个层次！

有不少CSS属性，有些人不了解，或者他们了解它们，可是忘记在须要时使用它们。其实，有时候咱们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这能够大大节约咱们编码的时间。

做为前端开发人员，咱们常常会遇到这样的事情。因此我问本身，为何不搞篇文章列出全部那些较少使用但既有用又有趣的 CSS 属性？

在本文中，我将介绍一些不同的CSS属性，但愿能给你带来点新鲜感，废话很少说，让咱们开始吧。

在CSS网格中使用Place-Items

咱们只需使用两行 CSS 代码就能够将元素水平和垂直居中。

HTML

<div class="hero">
    <div class="hero-wrapper">
        <h2>CSS is awesome</h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>

CSS

.hero {
    display: grid;
    place-items: center;
}

place-items是将justify-items和align-items结合在一块儿的简写属性。上面的代码等同于下面代码：

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}

你可能想知道，这是怎么回事? 咱们来解释一下。当使用place-items时，它将应用于网格中的每一个单元格，也就是说单元格的内容都会居中。若是咱们多增长几个单元格就会很清晰明了：

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}

Flexbox 与 margin 的配合

与flexbox 结合使用，margin: auto 能够很是轻松地将 flex 项目水平和垂直居中。

html

<div class="parent">
    <div class="child"></div>
</div>

css

.parent {
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}
.child {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}

看起来有点酷 😎

列表的 marker 属性

text-align 属性

display: inline-Flex 属性

column-rule 属性

background-repeat: round

object-fit 属性

四、资源：15 个优秀的响应式 CSS 框架

响应式 Web 设计旨在为各类设备（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优秀的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并免费的。

对响应式 Web 框架进行比较并不那么容易。有的框架适合设计更快、更精简网站的某些功能，而有些可能提供了大量功能、插件和附加组件，可是可能体积会比较庞大而且上手较难。

1. Bootstrap

Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先项目。Bootstrap 使前端开发更快、更轻松。他们提供了大量的文档、示例和演示，能够帮你快速进行响应式 Web 开发。在 Bootstrap 5 中作了一些重大更改，例如随意使用 jQuery 并添加了 RTL 支持，再加上现成的组件和工具类，使 Bootstrap 成为 Web 开发人员的最佳选择之一。

你还能够找到许多免费的高级 bootstrap 模板和 UI 工具包，这使你的开发过程更加轻松。

官网：https://getbootstrap.com/

2. Tailwind CSS

Tailwind 提供了一种基于实用工具的现代方法来构建响应站点。它有大量的实用工具类，无需编写 CSS 便可构建现代网站。它与其它框架的不一样之处在于须要经过开发设置来缩小最终 CSS 的大小，由于若是使用默认值，最终将会获得一个很大的 CSS 文件。Tailwind 可以快速将样式添加到 HTML 元素中，并提供了大量的开箱即用的设计样式。这里有大量的 Tailwind CSS 资源：

https://superdevresources.com...

官网：https://tailwindcss.com/

3. Tachyons

Tachyons 也是一个基于实用工具的 CSS 库，它提供了许多即装即用的复杂功能，无需本身编写大量 CSS。这样作的好处是 Tachyons 的开箱即用样式很轻巧，不须要其余设置。若是须要的话，仍然能够经过一些方法来减少尺寸。若是你须要易用的实用工具库，那么这应该是一个不错的选择。

官网：https://tachyons.io/

4. Foundation

Foundation 是由产品设计公司 ZURB 制做的自适应前端框架。这个框架是他们自 1998 年来构建 Web 产品和服务的结果。Foundation 是最早进的响应式前端框架，而且提供了许多自定义功能。

官网：http://foundation.zurb.com/

5. Material Design for Bootstrap (MDB)

MDB 创建在 Bootstrap 之上，并提供了开箱即用的材料设计外观。它具备出色的 CSS 库，而且与大多数流行的 JavaScript 框架（如 jQuery、Angular、React 和。Vue.js）兼容。其核心库是彻底无偿使用的。

官网：https://mdbootstrap.com/

UIkit
Pure CSS
Material Design Lite Framework (MDL)
Materialize
Skeleton
Bulma
Semantic UI
Milligram
Spectre.css
Base CSS Framework

五、使用 mask 实现视频弹幕人物遮罩过滤

常常看一些 LOL 比赛直播的小伙伴，确定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出如今一块儿的时候，弹幕会“巧妙”的躲到人物的下面，看着很是的智能。

简单的一个截图例子：

其实，这里是运用了 CSS 中的 MASK 属性实现的。

mask 简单用法介绍

以前在多篇文章都提到了 mask，比较详细的一篇是 -- 奇妙的 CSS MASK，本文不对 mask 的基本概念作过多讲解，向下阅读时，若是对一些 mask 的用法感到疑惑，能够再去看看。

这里只简单介绍下 mask 的基本用法：

最基本，使用 mask 的方式是借助图片，相似这样：

{
    /* Image values */
    mask: url(mask.png);                       /* 使用位图来作遮罩 */
    mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来作遮罩 */
}

固然，使用图片的方式后文会再讲。借助图片的方式其实比较繁琐，由于咱们首先还得准备相应的图片素材，除了图片，mask 还能够接受一个相似 background 的参数，也就是渐变。

相似以下使用方法：

{
    mask: linear-gradient(#000, transparent)                      /* 使用渐变来作遮罩 */
}

那该具体怎么使用呢？一个很是简单的例子，上述咱们创造了一个从黑色到透明渐变色，咱们将它运用到实际中，代码相似这样：

下面这样一张图片，叠加上一个从透明到黑色的渐变，

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

应用了 mask 以后，就会变成这样：

这个 DEMO，能够先简单了解到 mask 的基本用法。

这里获得了使用 mask 最重要结论：添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transparent 的重叠部分，而且重叠部分将会变得透明。

值得注意的是，上面的渐变使用的是 linear-gradient(90deg, transparent, #fff)，这里的 #fff 纯色部分其实换成任意颜色均可以，不影响效果。

CodePen Demo -- 使用 MASK 的基本使用

https://codepen.io/Chokcoco/p...

使用 mask 实现人物遮罩过滤

了解了 mask 的用法后，接下来，咱们运用 mask，简单实现视频弹幕中，弹幕碰到人物，自动被隐藏过滤的例子。

首先，我简单的模拟了一个召唤师峡谷，以及一些基本的弹幕：

方便示意，这里使用了一张静态图，表示了召唤师峡谷的地图，并不是真的视频，而弹幕则是一条一条的 <p> 元素，和实际状况一致。伪代码大概是这样：

<!-- 地图 -->
<div class="g-map"></div>
<!-- 包裹全部弹幕的容器 -->
<div class="g-barrage-container">
    <!-- 全部弹幕 -->
    <div class="g-barrage">6666</div>
    ...
    <div class="g-barrage">6666</div>
</div>

为了模拟实际状况，咱们再用一个 div 添加一个实际的人物，若是不作任何处理，其实就是咱们看视频打开弹幕的感觉，人物被视频所遮挡：

注意，这里我添加了一我的物亚索，而且用 animation 模拟了简单的运动，在运动的过程当中，人物是被弹幕给遮挡住的。

接下来，就能够请出 mask 了。

咱们利用 mask 制做一个 radial-gradient ，使得人物附近为 transparent，而且根据人物运动的 animation，给 mask 的 mask-position 也添加上相同的 animation 便可。最终能够获得这样的效果：

.g-barrage-container {
    position: absolute;
    mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%);
    animation: mask 10s infinite alternate;
}
@keyframes mask {
    100% {
        mask-position: 85vw 0;
    }
}

实际上就是给放置弹幕的容器，添加一个 mask 属性，把人物所在的位置标识出来，而且根据人物的运动不断的去变换这个 mask 便可。咱们把 mask 换成 background，原理一看就懂。

把 mask 替换成 background 示意图：

background 透明的地方，即 mask 中为 transparent 的部分，实际就是弹幕会被隐藏遮罩的部分，而其余白色部分，弹幕不会被隐藏，正是完美的利用了 mask 的特性。

其实这项技术和视频自己是无关的，咱们只须要根据视频计算须要屏蔽掉弹幕的位置，获得相应的 mask 参数便可。若是去掉背景和运动的人物，只保留弹幕和 mask，是这样的：

须要明确的是，使用 mask，不是将弹幕部分给遮挡住，而是利用 mask，指定弹幕容器之下，哪些部分正常展现，哪些部分透明隐藏。

最后，完整的 Demo 你能够戳这里：

CodePen Demo -- mask 实现弹幕人物遮罩过滤点击预览

https://codepen.io/Chokcoco/p...

实际生产环境中的运用

固然，上面咱们简单的还原了利用 mask 实现弹幕遮罩过滤的效果。可是实际状况比上述的场景复杂的多，由于人物英雄的位置是不肯定的，每一刻都在变化。因此在实际生产环境中，mask 图片的参数，实际上是由后端实时对视频进行处理计算出来的，而后传给前端，前端再进行渲染。

对于运用了这项技术的直播网站，咱们能够审查元素，看到包裹弹幕的容器的 mask 属性，每时每刻都在发生变化：

返回回来的实际上是一个 SVG 图片，大概长这个样子：

这样，根据视频人物的实时位置变化，不断计算新的 mask，再实时做用于弹幕容器之上，实现遮罩过滤。

最后

本文到此结束，但愿对你有帮助 :)，本文介绍了 CSS mask 的一个实际生产环境中，很是有意义的一次实践，也代表不少新的 CSS 技术，运用得当，仍是能给业务带来很是有益的帮助的。