CSS 技巧集合 | 思否技術週刊

CSS 是一種用來表現 HTML 或 XML 等文件樣式的計算機語言，相信朋友們對它都不陌生，今日給你們整理一個與 CSS 小技巧相關的合集，但願爲你們提供一些設計新思路~

CSS 有各類玩轉的方式，一塊兒來看看吧~

一、小技巧！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 不支持整塊超長溢出打點省略

二、原來CSS的background還能夠這麼玩

身爲一個前端開發者，背景是開發中的常客。大到整個網站的主題背景，小到一個按鈕的背景。CSS 的 background 屬性基本上天天開發都會遇到，絕大多數狀況下咱們都只會使用到了純色背景或者圖片背景。若是你想讓你開發的內容看起來更加生動有趣，經過本文讓你用純CSS也能夠開發出炫酷的背景。

開始以前

在開始以前，先請你回答下面的問題，若是你能所有回答正確，說明你對 background 屬性掌握的還不錯哦！

1.徑向漸變默認形狀是什麼？

A：原型 B：橢圓形

1. background 屬性的值爲多個時，哪一個值的圖層在最頂部？

A：第一個值 B：最後一個值

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

A：綠色背景 B：紅粉漸變背景 C：沒有背景

1. 當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/

1. UIkit
2. Pure CSS
3. Material Design Lite Framework (MDL)
4. Materialize
5. Skeleton
6. Bulma
7. Semantic UI
8. Milligram
9. Spectre.css
10. 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 技術，運用得當，仍是能給業務帶來很是有益的幫助的。

---