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

我們提供的服務(wù)有：網(wǎng)站制作、網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、劍閣ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學管理、有技術(shù)的劍閣網(wǎng)站制作公司

一、黑白圖像

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

img.desaturate{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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

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

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

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

.nav li{

border-right: 1px solid #666;

然后再除去最后一個元素

.nav li:last-child{

border-right: none;

也可以直接使用 :not() 偽類來應(yīng)用元素

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

border-right: 1px solid #666

如果你的元素有兄弟元素的話，也可以使用通用的熊年底選擇符( ~ ）

.nav li:first-child ~ li{

border-left: 1px solid #666

三、頁面頂部陰影

給網(wǎng)頁加上漂亮的頂部陰影效果

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

九、優(yōu)化顯示文本

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

html{

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizelegibility;

讀到這里，這篇“前端實用的CSS3技巧有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。