共计 6574 个字符，预计需要花费 17 分钟才能阅读完成。
CSS 是一种用来体现 HTML 或 XML 等文件款式的计算机语言，置信敌人们对它都不生疏，今日给大家整顿一个与 CSS 小技巧相干的合集，心愿为大家提供一些设计新思路~
CSS 有各种玩转的形式，一起来看看吧~
1、小技巧！CSS 整块文本溢出省略个性探索
明天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。
文本超长打点
咱们都晓得，到明天（2021/03/06），CSS 提供了两种形式便于咱们进行文本超长的打点省略。
对于单行文本，应用单行省略：
{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
而对于多行文本的超长省略，应用 -webkit-line-clamp 相干属性，兼容性也曾经十分好了：
{
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…
问题一：超长文本整块省略
问题二：iOS 不反对整块超长溢出打点省略
2、原来 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);
根底背景扩大
纯色背景就没什么可说的了，只能扭转色彩。
1、线性背景
2、径向背景
3、角向突变
4、组合背景
3、应用这些 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 属性
4、资源：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
5、应用 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 技术，使用切当，还是能给业务带来十分无益的帮忙的。