css3樣式總結?點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來，現在小編就來說說關于css3樣式總結?下面内容希望能幫助到你，我們來一起看看吧!

css3樣式總結

點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

filter是css3的一個屬性，大家應該都很少用到，很多人隻是知道有這個屬性。Webkit率先支持了這幾個功能，不過現在大部分浏覽器也都做了兼容性，下面大家就一起來學習吧。

CSS3 filter濾鏡詳細介紹及示例

現在規範中支持的效果有：

CSS3 filter濾鏡詳細介紹及示例

語法

-webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px);

無效果filter:none;

CSS3 filter濾鏡詳細介紹及示例

模糊filter:blur(10px);

CSS3 filter濾鏡詳細介紹及示例

灰度filter:grayscale(0.5);

CSS3 filter濾鏡詳細介紹及示例

亮度filter:brightness(0.5);

CSS3 filter濾鏡詳細介紹及示例

對比度filter:contrast(2.6);

CSS3 filter濾鏡詳細介紹及示例

飽和度filter:saturate(7.9);

CSS3 filter濾鏡詳細介紹及示例

色相旋轉filter:hue-rotate(260deg);

CSS3 filter濾鏡詳細介紹及示例

反色filter:invert(0.9);

CSS3 filter濾鏡詳細介紹及示例

陰影filter:drop-shadow(10px 10px 10px #000);

CSS3 filter濾鏡詳細介紹及示例

最後大家看看幾種組合效果

CSS3 filter濾鏡詳細介紹及示例

是不是感覺美美哒了，美女換了身衣服，皮膚也變得紅潤了，頭發唇彩等都變了。前端也可以用代碼P出好看的圖片，是不是很厲害？

上面的效果代碼：

filter:saturate(1.9) contrast(.6) hue-rotate(320deg);

喜歡小編的點擊關注，了解更多知識！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!