里我工作中收集了10個很不錯的CSS技巧，你可以用在你的項目上。它可以幫你很好地整理你的元素并讓他們看起來蠻酷的。下面開始我們的內容，希望你會喜歡它。下面是我收集的CSS技巧，希望能幫助到你，感覺收藏吧。

1. 黑白圖像

這段代碼會讓你的彩色照片顯示為黑白照片，是不是很酷？

img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
}

2. 使用 :not() 在菜單上應用/取消應用邊框

先給每一個菜單項添加邊框

/* add border */.nav li { border-right: 1px solid #666;
}

……然后再除去最后一個元素……

// remove border /.nav li:last-child { border-right: none;
}

……可以直接使用 :not() 偽類來應用元素：

.nav li:not(:last-child) { border-right: 1px solid #666;
}

這樣代碼就干凈，易讀，易于理解了。

當然，如果你的新元素有兄弟元素的話，也可以使用通用的兄弟選擇符（~）：

..nav li:first-child ~ li { border-left: 1px solid #666;
}

3. 頁面頂部陰影

下面這個簡單的 CSS3 代碼片段可以給網頁加上漂亮的頂部陰影效果：

body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px;
 -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 z-index: 100;
}

4. 給 body 添加行高

你不需要分別添加 line-height 到每個p,h標記等。只要添加到 body 即可：

body { line-height: 1;
}

這樣文本元素就可以很容易地從 body 繼承。

5. 所有一切都垂直居中

要將所有元素垂直居中，太簡單了：

html, body { height: 100%; margin: 0;
}body { -webkit-align-items: center; 
 -ms-flex-align: center; 
 align-items: center; display: -webkit-flex; display: flex;
}

看，是不是很簡單。

注意：在IE11中要小心flexbox。

6. 逗號分隔的列表

讓HTML列表項看上去像一個真正的，用逗號分隔的列表：

ul > li:not(:last-child)::after { content: ",";
}

對最后一個列表項使用 :not() 偽類。

7. 使用負的 nth-child 選擇項目

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

li { display: none;
}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;
}

8. 對圖標使用 SVG

我們沒有理由不對圖標使用SVG：

.logo { background: url("logo.svg");
}

SVG對所有的分辨率類型都具有良好的擴展性，并支持所有瀏覽器都回歸到IE9。這樣可以避開.png、.jpg或.gif文件了。

9. 優化顯示文本

有時，字體并不能在所有設備上都達到最佳的顯示，所以可以讓設備瀏覽器來幫助你：

html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

注：請負責任地使用 optimizeLegibility。此外，IE /Edge沒有 text-rendering 支持。

10. 對純 CSS 滑塊使用 max-height

使用 max-height 和溢出隱藏來實現只有CSS的滑塊：

.slider ul { max-height: 0; overlow: hidden;
}.slider:hover ul { max-height: 1000px; transition: .3s ease;
}

11. 繼承 box-sizing

讓 box-sizing 繼承 html：

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}

這樣在插件或杠桿其他行為的其他組件中就能更容易地改變 box-sizing 了。

12. 表格單元格等寬

表格工作起來很麻煩，所以務必盡量使用 table-layout: fixed 來保持單元格的等寬：

.calendar { table-layout: fixed;
}

13. 用 Flexbox 擺脫外邊距的各種 hack

當需要用到列分隔符時，通過flexbox的 space-between 屬性，你就可以擺脫nth-，first-，和 last-child 的hack了：

.list { display: flex; justify-content: space-between;
}.list .person { flex-basis: 23%;
}

現在，列表分隔符就會在均勻間隔的位置出現。

14. 使用屬性選擇器用于空鏈接

當a元素沒有文本值，但 href 屬性有鏈接的時候顯示鏈接：

a[href^="http"]:empty::before { content: attr(href);
}

相當方便。

15. 檢測鼠標雙擊

HTML：

<div class="test3"> <span><input type="text" value=" " readonly="true" />
 <a >Double click me</a></span></div>

CSS：

.test3 span { position: relative;
}.test3 span a { position: relative; z-index: 2;
}.test3 span a:hover, .test3 span a:active { z-index: 4;
}.test3 span input { background: transparent; border: 0; cursor: pointer; position: absolute; top: -1px; left: 0; width: 101%; /* Hacky */
 height: 301%; /* Hacky */
 z-index: 3;
}.test3 span input:focus { background: transparent; border: 0; z-index: 1;
}

16. CSS 寫出三角形

/* create an arrow that points up */div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* left arrow slant */
 border-right:5px solid transparent; /* right arrow slant */
 border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px; line-height:0px;
}
/* create an arrow that points down */div.arrow-down { width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #2f2f2f; font-size:0px; line-height:0px;
}
/* create an arrow that points left */div.arrow-left { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant */
 border-right:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px; line-height:0px;
}
/* create an arrow that points right */div.arrow-right { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant */
 border-left:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px; line-height:0px;
}

17. CSS3 calc() 的使用

calc() 用法類似于函數，能夠給元素設置動態的值：

/* basic calc */.simpleBlock { width: calc(100% - 100px);
}
/* calc in calc */.complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px);
}

18. 文本漸變

文本漸變效果很流行，使用 CSS3 能夠很簡單就實現：

h2[data-text] {
 position: relative;
}h2[data-text]::after {
 content: attr(data-text);
 z-index: 10;
 color: #e3e3e3;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

19. 禁用鼠標事件

CSS3 新增的 pointer-events 讓你能夠禁用元素的鼠標事件，例如，一個連接如果設置了下面的樣式就無法點擊了。

.disabled { pointer-events: none; }

20. 模糊文本

簡單但很漂亮的文本模糊效果，簡單又好看！

.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

21.簡單的方法調整圖片大小

.content img {

height:auto;

width:500px;

}

言

在響應式布局逐漸成為主流的今天，網頁或者app的流式布局已經不算是一個新鮮的詞匯了。今天我要講的一個內容也是跟頁面流式布局有關，如何讓你的網頁實現完美的縮放？

網頁布局

我們可以很快速的寫出一個響應式布局的頁面，首先看一下效果圖。

網頁布局

其中html部分的代碼如下：

html部分代碼

css中的item代碼為：

css代碼

通過以上代碼，完成上述的流式布局后，在我們改變瀏覽器窗口大小時，div也會隨之進行縮放。

問題

But，你以為這就是我們想要的結果嗎？

當然不是！在改變瀏覽器窗口大小時，我們發現雖然div的寬度是進行了縮放，但是高度卻沒變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。

縮放后寬高比

從上圖中可以很容易看出，縮放后的div寬高比比之前小很多，這并不是我們想要的結果。

我們需要達到的效果是在改變瀏覽器窗口大小時，div也會隨之進行等比例的縮放。

實現辦法

首先，可以使用Javascript代碼去實現，這是沒有問題的。但是綁定Javascript的onresize事件，在拖拽時可能會出卡頓現象，體驗不是很好。

接下來我們通過CSS來實現以上的效果。

使用的核心屬性是我們平時并不太注意的padding-bottom。

padding-bottom有一個很容易讓人忽略的特性是，當取值為百分比形式時，其百分比的基數是父元素的寬度，而不是高度。

因此我們可以在不用給父元素設置高度的時候，就可以通過padding-bottom屬性確定當前元素的高度。我們的做法如下。

1. 將元素的height屬性設為0，通過padding-bottom屬性確定元素高度。

2. 設置合理的padding-bottom值，例如上述的例子中，在寬度為21%時，如果需要高度是寬度的1.62倍，我們可以將padding-bottom取值為34%

修改后的CSS代碼如下。

修改后的CSS

修改后，我們再次調整瀏覽器窗口的大小，就會發現div是等比例的進行縮放，完美達到了我們的要求。

修改后等比例縮放

疑問

在這里，可能會有人有疑問如果設置overflow:hidden;那么里面的文字會不會因為超過height，就會被隱藏了？

答案是不會的，根據CSS2.1的規范，overflow只會對處于padding外面的內容生效，即只有超出了 padding區域的內容才會被overflow屬性隱藏掉。而在設置padding-bottom后，實際已經決定了元素的height屬性，因此overflow:hidden;不會生效。

總結

今天這篇文章主要講解了利用CSS完成頁面等比例縮放的最簡單方式，你學會了嗎？