前端實用的CSS3技巧有哪些

本文小編為大家詳細介紹“前端實用的CSS3技巧有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“前端實用的CSS3技巧有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、黑白圖像

當你需要讓一張彩色的圖片顯示為黑白照片的時候，你可以用下面的一段代碼。

img.desaturate{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

前端比較實用的 CSS3 技巧，總有一個是你需要的！

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

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

前端比較實用的 CSS3 技巧，總有一個是你需要的！

.nav li{

border-right: 1px solid #666;

然后再除去最后一個元素

.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

三、頁面頂部陰影

給網頁加上漂亮的頂部陰影效果

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;

前端比較實用的 CSS3 技巧，總有一個是你需要的！

四、給 body 添加行高

不需要給別給 p,h之類的添加行高，直接：

body{

line-height: 1;

五、所有一切都垂直居中

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

六、逗號分隔列表

讓HTML列表項看上去像被一個真正的，分隔的列表

ul > li:not(:last-child)::after{

content: "，";

七、使用負的 nth-child 選擇項目

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

li{

display: none;

li:nth-child(-n+3){

display: block;

八、對圖標使用 SVG

.logo{

background: url("logo.svg");

九、優化顯示文本

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

html{

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizelegibility;

讀到這里，這篇“前端實用的CSS3技巧有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。