1. 程式人生 > >CSS一些很實用的技巧。

CSS一些很實用的技巧。

1.background-color:rgba

相信三基色大家都知道 rgb分別代表紅,綠,藍 a呢代表透明度 取值在0~1之間 0代表全透明 1代表全不透明

這是background的新屬性,在配合qq截圖來取色簡直是絕配

 

我們可以輕而易舉的拿到rbg 這是我們只要在將對應的rgb 填入就行

效果圖如下

 

 

2.引入背景圖片時候background-size 可以在url中直接寫

這裡我們在一個盒子填充一個背景

我們使用 cover 屬性等比例放大進行填充

 

我們也可以直接在url 中寫 cover,只要在position後面 加/cover 即可

 

 

 

 注意 cover 必須寫在 position後面

 3. 給 body 新增行高 

 你不需要分別新增 line-height 到每個p,h標記等。只要新增到 body 即可:

 

 4. 使用負的 nth-child 選擇專案 

在CSS中使用負的 nth-child 選擇專案1到專案n。

 

還可以指定選擇範圍元素

這裡就表示獲取了第四到第五

 

 

 5. 偽元素實現換行,替代換行標籤

 

 

6. 單行文字溢位顯示省略號

 

 

7. 背景可以多重化

還在使用的用多個盒子用div定位麼

懂得這個好技巧可以省去很多不必要的麻煩

 

8. 偽元素清除浮動

原理:利用:after和:before來在元素內部插入兩個元素塊,從而達到清除浮動的效果。