CSS操作之你不得不知的一些小技巧（一）ヾ(Ő∀Ő๑)ﾉ太棒了！！

目錄

1. 單行/多行文本，超出隱藏並顯示省略號
2. 垂直水平居中
3. 使用:hover選擇器的content屬性
4. user-select設置不能選中文本
5. :not()選擇器
6. 換行文本使用 box-decoration-break
7. css3 pointer-events阻止鼠標事件
8. vue深度選擇器
9. 改變input光標顏色
10. 改變input觸發後邊框顏色
11. CSS3 不規則投影filter:drop-shadow
12. 有趣的 CSS3 mask屬性
13. ::selection選擇器

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

2. CSS垂直水平居中

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

3. 使用:hover選擇器的content屬性

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

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

演示效果：

注意： 右鍵或其他形式保存這張圖片的時候，保存的是原來src對應的圖片
content屬性一般用來與::before及::after僞元素配合使用，來插入生成內容；

4. user-select設置不能選中文本

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

參數	描述
none	文本不能被選擇
text	可以選擇文本
all	當所有內容作爲一個整體時可以被選擇。如果雙擊或者在上下文上點擊子元素，那麼被選擇的部分將是以該子元素向上回溯的最高祖先元素
element	可以選擇文本，但選擇範圍受元素邊界的約束

兼容性代碼示例：

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

5. :not()選擇器

選中不在此範圍內的元素，例如：div:not(:last-child)，選中除最後一個div的所有div元素
例子：
有時候在做列表時需要爲每項添加下邊框線，但最後一個項不需要邊框線

6. 換行文本使用 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屬性
它可以指定元素片段在跨行、跨列或跨頁（如打印）時候的樣式渲染表現

參數	描述
slice	默認值。表示各個盒子斷開的部分如同切割開一般
clone	表示斷開的各個盒子樣式獨自渲染

添加樣式：

-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;

7. css3 pointer-events阻止鼠標事件

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

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

參數	描述
auto	效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同
none	元素不再是鼠標事件的目標，鼠標不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設置了pointer-events爲其它值，比如auto，鼠標還是會監聽這個子元素的
其它屬性值爲SVG專用	省略

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

8. vue深度選擇器

• 有時候需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。
• 此時只能通過>>>，穿透scoped。
• 有些Sass之類的預處理器無法正確解析 >>>。可以使用/deep/操作符 或::v-deep( >>> 的別名)
  示例：

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

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

9. 改變input光標顏色

<input type="text">

input{
	caret-color:red;
}

10. 改變input觸發後邊框顏色

<input type="text">

input{
	outline-color: green;
}

11. 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生成的形狀。

12. 有趣的 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等主流的瀏覽器都支持該屬性。

13. ::selection選擇器

• ::selection選擇器匹配元素中被用戶選中或處於高亮狀態的部分。
• ::selection只可以應用於少數的CSS屬性：color, background, cursor,和outline

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

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