CSS 12個趣味小技巧大公開 - 原力計劃

者 | zoyoy

責編 | 伍杏玲

出品 | CSDN博客

CSS單行/多行文本，超出隱藏并顯示省略號

方法一：使用CSS屬性

單行文本溢出顯示省略號

width: 100px;
overflow: hidden;
text-overflow:ellipsis; //文本溢出顯示省略號
white-space: nowrap; //文本不會換行

多行文本溢出顯示省略號

width: 100px;
overflow: hidden;
text-overflow: ellipsis; //文本溢出顯示省略號
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

因為使用了WebKit的CSS擴展屬性，該方法適用于WebKit瀏覽器及移動端；

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。為了實現該效果，它需要組合其他的WebKit屬性。

常見結合屬性：

display: -webkit-box;必須結合的屬性，將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。

使用場景：多用于移動端頁面，因為移動設備瀏覽器更多是基于 WebKit 內核，除了兼容性不好，實現截斷的效果不錯。

方法二：利用定位和偽類元素

<div class="text">適合場景：文字內容較多，確定文字內容一定會超過容器的，那么選擇這種方式不錯。但文字未超出行的情況下也會出現省略號,可結合js優化該方法。</text>

.text{
position: relative;
width:300px;
line-height: 20px;
max-height: 60px;
overflow: hidden;
}
.text::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
// 添加漸變背景 避免文字只顯示一半,難看
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

適合場景：文字內容較多，確定文字內容一定會超過容器的，那么選擇這種方式不錯。但文字未超出行的情況下也會出現省略號,可結合js優化該方法。

方法三：運用第三方插件或者自己寫JS腳本控制

clamp.js
jQuery.dotdotdot

CSS垂直水平居中

CSS垂直水平居中的各種解決方法匯總：

https://blog.csdn.net/weixin_40693643/article/details/104446577

使用:hover選擇器的content屬性

<img src="../img/pic2.png">

img:hover{
content: url('../img/pic1.png')
}

演示效果：

注意：右鍵或其他形式保存這張圖片的時候，保存的是原來src對應的圖片。

content屬性一般用來與::before及::after偽元素配合使用，來插入生成內容。

user-select設置不能選中文本

user-select屬性是css3新增的屬性，用于設置用戶是否能夠選中文本。可用于除替換元素外的所有元素。

兼容性代碼示例：

-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;

:not選擇器

選中不在此范圍內的元素，例如：div:not(:last-child)，選中除最后一個div的所有div元素。

有時候在做列表時需要為每項添加下邊框線，但最后一個項不需要邊框線。

換行文本使用 box-decoration-break

你有沒有遇到過如下情況：

<div class="box">
<span>啊！我被分成兩半兒啦~~</span>
</div>

.box{
width:100px;
border: 1px solid #000;
}
.box>span{
border-radius: 20px;
background-color: red;
color:#fff;
}

解決這個問題可以使用box-decoration-break屬性

它可以指定元素片段在跨行、跨列或跨頁（如打印）時候的樣式渲染表現

添加樣式：

-webkit-box-decoration-break: clone;
box-decoration-break:clone;

效果圖：

實際應用案列：漸變背景

<div class="box">
<span class="text">
顏色從左到右漸變效果是這樣的哦哦哦哦哦~~~
</span>
</div>

.box{
width:200px;
}
.text {
background-image: linear-gradient(to right, blue, red 200px);
}

添加樣式：

-webkit-box-decoration-break: clone;
box-decoration-break:clone;

CSS3 pointer-events阻止鼠標事件

pointer-events 更像是JavaScript，它能夠：

阻止用戶的點擊動作產生任何效果
阻止缺省鼠標指針的顯示
阻止CSS里的 hover 和 active 狀態的變化觸發事件
阻止JavaScript點擊動作觸發的事件

瀏覽器兼容性：

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個CSS3屬性，IE6/7/8/9都不支持（IE11又支持，不過很好的一點是在ie中給a加disabled 點擊事件自動無效。），Opera在SVG中支持。但是該屬性HTML中不支持。

Vue深度選擇器

有時候需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。

此時只能通過>>>，穿透scoped。

有些Sass之類的預處理器無法正確解析 >>>。可以使用/deep/操作符或::v-deep( >>> 的別名)

示例：

<style scoped>
外層 >>> 第三方組件類名 {
樣式
}
/deep/ 第三方組件類名 {
樣式
}
</style>

改變input光標顏色

<input type="text">

input{
caret-color:red;
}

改變input觸發后邊框顏色

<input type="text">

input{
outline-color: green;
}

CSS3 不規則投影filter:drop-shadow

<img class="img1" src="../img/pic5.png" alt="">
<img class="img2" src="../img/pic5.png" alt="">

.img1{
box-shadow: 4px 4px 4px red;
}
.img2{
filter: drop-shadow(4px 4px 4px red);
}

演示效果：

圖片示例：

根據圖片可以明顯的看出box-shadow和filter: drop-shadow的區別：

box-shadow會忽視透明部分,而filter: drop-shadow不會

這類情況包括：

半透明圖像、背景圖像、或者 border-image；
元素設置了點狀，虛線或半透明的邊框，但沒有背景（或者當 background-clip 不是 border-box時）；
對話氣泡，它的小尾巴通常是用偽元素生成的；
“切角效果”；
折角效果；
通過clip-path生成的形狀。

有趣的 CSS3 mask屬性

pic7.jpg

pic1.png

<div class="mask"></div>

.mask{
width: 300px;
height: 300px;
background-image: url(../img/pic7.jpg);
-webkit-mask-image: url(../img/pic1.png);
-webkit-mask-size: 150px 150px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
}

運行效果：

注意：

mask-image的圖片一定要是png圖片才看得出效果，兩張圖片結合會取相交的區域顯示
mask和background差不多，同樣擁有size、repeat、position等屬性
除了IE不支持外，谷歌、火狐、Edge、Safari、Opera等主流的瀏覽器都支持該屬性。

::selection選擇器

::selection選擇器匹配元素中被用戶選中或處于高亮狀態的部分。

::selection只可以應用于少數的CSS屬性：color, background, cursor,和outline

<p>選中高亮我就變了了了了~~~</p>

p::selection{
color: #fff;
background:red;
}

原文鏈接：

https://blog.csdn.net/weixin_40693643/article/details/104324438

聲明：本文系CSND博主原創，版權歸作者所有。

《原力計劃【第二季】- 學習力挑戰》

正式開始

即日起至 3月21日

千萬流量支持原創作者

更有專屬【勛章】等你來挑戰

我們的日常生活中，各種各樣的條紋圖案隨處可見，那么我們用CSS又該怎樣實現呢？

方案

假設我們有一條基本的垂直線性變化，顏色由red過渡到green。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>條紋背景</title>
  <style>
    .box{
      width: 300px;
      height: 300px;

      background: linear-gradient(red, blue);
    }
  </style>
</head>
<body>
  <div class="box">

  </div>
</body>
</html>

我們可以讓這兩個顏色靠近點：

      background: linear-gradient(red 20%, blue 80%);

這句話的意思是，當前容器的20%的區域被填充成red，而從80%起（也就是從從底部起的20%）被填充成blue，而中間的60%，則是線性漸變區域。

那么當我們把這兩個顏色之間的線性簡便區域變為零時，則有如下效果：

background: linear-gradient(red 50%, blue 50%);

由上圖我們可以看見，已經沒有任何的漸變效果，只有兩塊實色，從實際上看，我們創建了兩條水平條紋。

我們可以通過background-size來調整尺寸：

  <style>
    .box{
      width: 300px;
      height: 300px;
      border: 2px dashed black;

      background: linear-gradient(red 50%, blue 50%) no-repeat;
      background-size: 100% 30px;
    }
  </style>

上圖中，我們把每條條紋的實際尺寸調整到到了15px，我們也可以同相同的方法來創建不等寬的條紋。

background: linear-gradient(red 20%, blue 20%) no-repeat;

這里有一個語法糖點，在設置第二個參數的時候可以設置成0，意思就是瀏覽器在解析時會把第二個色標的位置調整為前一個色標的位置。

background: linear-gradient(red 20%, blue 0) no-repeat;

這個效果跟之前的是一樣的。

我們也可以創建多個多彩的條紋。

      background: linear-gradient(red 33.33%, blue 0, blue 66.66%, yellowgreen 0) no-repeat;

垂直條紋

顏色的垂直線性過度是默認的，所以水平條紋是最容易創建的，那么當我們需要垂直的條紋時又該怎么辦呢？其實很簡單，只要如下即可：

之所以整理這類專題的手冊，就是CSS相關的內容實在太碎和零散，同時又夾雜著相關的兼容問題。遇到問題時，我們有時候過度依賴搜索引擎進行求證解決，解決完也沒做認真的歸納和總結。再次遇到此類問題時，我們有可能還不會，這就是我歸納這個手冊的目的，我會把日常工作中經常會用到的高頻CSS相關方法歸納到這個手冊里（有的內容可能來源其它作者），歡迎你持續的訂閱和關注。

今天我們一起來梳理下CSS垂直居中的幾種方法，我們在布局一個頁面時，通常都會用到水平置中和垂直置中，處理水平居中很好處理，不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題，但一直以來最麻煩對齊問題就是「垂直居中」，以下將介紹七種單純利用CSS垂直置中的方式，其實一點也不難(當然跟水平居中比起來難了一點)，只需要理解背后的原理就可以輕松應用。

1、設定行高( line-height )

設定行高是垂直居中最簡單的方式，適用于「單行」的「行內元素」 ( inline、inline-block )，例如單行的標題，或是已經設為inline-block屬性的div，若將line-height設成和高度一樣的數值，則內容的行內元素就會被垂直置中，因為是行高，所以會在行內元素的上下都加上行高的1/2，所以就垂直置中了！不過由此就可以看出，為什么必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。CSS范例：外層div0，內容redbox，讓redbox水平垂直置中。

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
 line-height:150px;
 text-align:center;
}
.redbox{
 display:inline-block;
 width:30px;
 height:30px;
 background:#c00;
}

2、添加偽元素( ::before、::after )

剛剛第一種方法，雖然是最簡單的方法(適用于單行標題)，不過就是只能單行，所以我們如果要讓多行的元素也可以垂直居中，就須要使用偽元素的方式。在此之前，先解釋一下CSS里頭vertical-align這個屬性，這個屬性雖然是垂直置中，不過卻是指在元素內的所有元素垂直位置互相置中，并不是相對于外框的高度垂直居中。(下面的CSS會造成這種樣子的垂直居中)

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
 text-align:center;
}
.redbox{
 width:30px;
 height:30px;
 background:#c00;
 display:inline-block;
 vertical-align:middle;
}
.greenbox{
 width:30px;
 height:60px;
 background:#0c0;
 display:inline-block;
 vertical-align:middle;
}
.bluebox{
 width:30px;
 height:40px;
 background:#00f;
 display:inline-block;
 vertical-align:middle;
}

因此，如果有一個方塊變成了高度100%，那么其他的方塊就會真正的垂直居中。

.greenbox{
 width:30px;
 height:100%;
 background:#0c0;
 display:inline-block;
 vertical-align:middle;
}

但是我們總不能每次要垂直居中，都要添加一個奇怪的div在里頭吧！所以我們就要把腦筋動到「偽元素」身上，利用::before和::after添加div進到框框內，讓這個「偽」div的高度100%,就可以輕松地讓其他的div都居中。不過不過不過！div記得要把display設為inline-block，畢竟 vertical-align:middle 是針對行內元素，div本身是block，所以必須要做更改！

.div0::before{
 content:'';
 width:0;
 height:100%;
 display:inline-block;
 position:relative;
 vertical-align:middle;
 background:#f00;
}

3、calc 動態計算

看到這邊或許會有疑問，如果今天我的div必須是block，我該怎么讓它垂直居中呢？這時候就必須用到CSS特有的calc動態計算的能力，我們只要讓要居中的div的top屬性，與上方的距離是「50%的外框高度- 50%的div高度」，就可以做到垂直居中，至于為什么不用margin-top，因為margin抓到的是水平高度，必須要用top才會正確。

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
}
.redbox{
 position:relative； 
 width:30px;
 height:30px;
 background:#c00;
 float:left;
 top:calc(50% - 15px);
 margin-left:calc(50% - 45px);
}
.greenbox{
 position:relative；
 width:30px;
 height:80px;
 background:#0c0;
 float:left;
 top:calc(50% - 40px);
}
.bluebox{
 position:relative； 
 width:30px;
 height:40px;
 background:#00f;
 float:left;
 top:calc(50% - 20px);
}

4、使用表格或假裝表格

或許有些人會發現，在表格這個HTML里，要實現垂直置中是相當容易的，只需要下一行vertical-align:middle就可以，為什么呢？最主要的原因就在于table的display是table，而td的display是table-cell，所以我們除了直接使用表格之外，也可以將要垂直置中元素的父元素的display改為table-cell，就可以輕松實現，不過修改display有時候也會造成其他樣式屬性的連動影響，需要小心使用。

HTML：

<table>
 <tr>
 <td>
 <div>表格垂直居中</div>
 </td>
 </tr>
</table>
<div class="like-table">
 <div>假的表格垂直居中</div>
</div>

CSS：

.like-table{
 display:table-cell;
}
td,
.like-table{
 width:150px;
 height:100px;
 border:1px solid #000;
 vertical-align: middle;
}
td div,
.like-table div{
 width:100px;
 height:50px;
 margin:0 auto;
 color:#fff;
 font-size:12px;
 line-height: 50px;
 text-align: center;
 background:#c00;
}
.like-table div{
 background:#069;
}

5、transform

transform是CSS3的新屬性，主要用于元素的變形、旋轉和位移，利用transform里頭的translateY (改變垂直的位移，如果使用百分比為單位，則是以元素本身的長寬為基準)，搭配元素本身的top屬性，就可以做出垂直居中的效果，需要注意的地方是，子元素必須要加上position:relative，不然就會沒有效果喔。

.use-transform{
 width:200px;
 height:200px;
 border:1px solid #000;
}
.use-transform div{
 position: relative;
 width:100px;
 height:50px;
 top:50%;
 transform:translateY(-50%);
 background:#095;
}

6、絕對定位

絕對定位就是CSS里頭的position:absolute，利用絕對位置來指定，但垂直置中的做法又和我們正統的絕對位置不太相同，是要將上下左右的數值都設為0，再搭配一個margin:auto，就可以辦到垂直置中，不過要特別注意的是，設定絕對定位的子元素，其父元素的position必須要指定為relative喔！而且絕對定位的元素是會互相覆蓋的，所以如果內容元素較多，可能就會有些問題。

.use-absolute{
 position: relative;
 width:200px;
 height:150px;
 border:1px solid #000;
}
.use-absolute div{
 position: absolute;
 width:100px;
 height:50px;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 background:#f60;
}

7、使用Flexbox

Flexbox可謂是我們在移動端用的最多的布局方法，因為大部分現代手機瀏覽器都支持這個方法了。Flexbox，使用align-items或align-content的屬性，輕輕松松就可以做到垂直居中的效果喔！

.use-flexbox{
 display:flex;
 align-items:center;
 justify-content:center;
 width:200px;
 height:150px;
 border:1px solid #000;
}
.use-flexbox div{
 width:100px;
 height:50px;
 background:#099;
}

由于flexbox布局的屬性眾多，如何方便記憶，筆者贈送大家一張圖：

上圖有可能你看不清楚，此圖高清無碼地址，歡迎下載使用：

https://www.qianduandaren.com/demo/images/flex.png

本文內容參考來源

https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html

由于源文是繁體，筆者在內容上做了一些調整。

小節

以上就是筆者整理的一些垂直居中的方法，由于垂直居中往往會動用到修改display這個屬性，往往會在排版上造成一些影響，例如不該用flexbox 的地方如果用了flexbox，不該用table 的地方用了table，不該用inline-block 的地方用了inline-block，后續反而要多寫許多其他的定位樣式來進行修正，那就有點本末倒置了，因此如何活用這些CSS 垂直居中的方法，就要依據大家的版面結構進行靈活運用啰！^_^ 如果你有其他本文沒有提及到的垂直居中方法，歡迎到留言區進行分析喲。

更多精彩內容，請關注“前端達人”公眾號

在線咨詢

上一篇：基于Redis實現范圍查詢的IP庫緩存設計方案
下一篇：高品質無線環繞音效—飛利浦無線環繞影院CSS6530B 體驗