20個常用的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;

}


…然後除去最後一個元素…

// removeorder /

 border-right: none;
}


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

.nav li:not(:last-child) {

 border-right: 10px solid #6666 ;

}

這樣程式碼就乾淨，易讀，易於理解了。

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

..nav li:first-child ~ li {

 border-left: 1px solid #666;

}



3. 頁面頂部陰影

下面這個簡單的css3 程式碼片段可以為網頁加上漂亮的頂部陰影效果：

body:before {

  ;

top: -10px;

         left: 0;
         width: 100%;
   : 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);🠎;



4. 給body 增加行高


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

body {
 line-height: 1;

}

這樣文本元素就可以輕鬆地從 body 繼承。

5. 所有一切都垂直居中

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

html, body {

 height: 100%;

 margin: 00130%; -align-items: center;  

 -ms-flex-align: center;    align-items: center;  display: -webkit-flex;

 display: flex

}

}

，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 . 對圖示使用SVG

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

.logo {

 background: url("logo.svg");

}


SVG對所有的分辨率類型都具有良好的SV性，並支援所有瀏覽器都回歸到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:

.slider ul {
 max-height: 0;
}

.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;
: space-between;
}

.list .person {
 flex-basis: 23%;
}

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

14. 使用屬性選擇器用於空連結

當a元素沒有文字值，但href 屬性有連結的時候顯示連結：

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

相當方便。

15. 偵測滑鼠雙擊

HTML：

 position: relative;
 z-index: 2;}

.test3 span a:hover, .test3 span a:active {

 z-index: 4;

}
.test3 span input ;
 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;
}


來寫三角形程式碼，且相容於IE6.

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

}

/* create an arrow that points down */div.arrow-down {

 width:0px;

 height:0px;

 p-left solid transparent;

 border-top:5px solid #2f2f2f;
 font-size:0px;
 line-height:0px;
}

/* create an hx;
}

/* create an left :0px;
 height:0px;
 border-bottom:5px solid transparent;  /* left arrow slant */
 border-top:5px solid transparent; //* 25 sl /* bottom, add background color here */
 font-size:0px;
 line-height:0px;
}

/* create an arrow that points right */

/* create an arrow that points right */
;
 height:0px;
 border-bottom:5px solid transparent;  /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant /ft:5px solid transparent; /* right arrow slant /ft , add background color here */
 font-size:0px;
 line-height:0px;
}



17.3 calc() 的使用


17.3 calc() 的使用


17.3 calc() 的使用

)動態的值：

/* basic calc */
.simpleBlock {
 width: calc(100% - 100px);
}

/* calc in calcmx);

} /* calc in calcm 50% / 3);

 padding: 5px calc(3% - 2px);

 margin-left: calc(10% + 10px);

}

，漸變


，使用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(line, left 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);

}