小編給大家分享一下css3如何實現過濾效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
上面的圖片就是css3新特性的濾鏡效果，學會了這些那么我們這群愛美愛帥的大web是不是就可以完美的用代碼實現照片美化了捏~~
好，咱們先把照片后面的白框實現，
XML/HTML Code復制內容到剪貼板
<style>
#div1{
/*給div定義寬高和顏色*/
width: 200px;
height: 250px;
background: white;
/* 內填充距離照片為15px ，文字居中*/
padding: 15px;
text-align: center;
/* 把白色背景旋轉-10deg */
-webkit-transform: rotate(-10deg);
/*給背景一個陰影的效果*/
box-shadow: 4px 4px 4px #666;
float: left;
}
</style>
<BR>
<body><BR>
<div id="div1">
<img src="img/001V28Mwty6Fww02IiNad&690.jpg">
<p>灰色濾鏡</p>
</div>
<BR>
</body>把白色的背景框寫好之后，接下來就該到濾鏡了
首先來第一張，藝術的黑白色
XML/HTML Code復制內容到剪貼板
#div1 img{
/*把div1里面的圖片百分百，等同于相對于在div1里面百分比放大填充*/
width: 100%;
/*把圖片變成黑白色括號里跟顏色變化的值，只能取0~1之間*/
-webkit-filter: grayscale(1); }
第二張照片，額...老照片.
XML/HTML Code復制內容到剪貼板
#div1 img{
width: 100%;
-webkit-filter: sepia(1);
}第三張照片，反色？我也不太清楚啥顏色
XML/HTML Code復制內容到剪貼板
#div1 img{
width: 100%;
-webkit-filter: hue-rotate(200deg);
}第四張照片，仿佛罩了一層白霧
XML/HTML Code復制內容到剪貼板
#div1 img{
width: 100%;
-webkit-filter: opacity(0.5);
}還有一張照片的效果圖上沒有，是模糊效果代碼如下
XML/HTML Code復制內容到剪貼板
#div4 img{
width: 100%;
-webkit-filter: opacity(0.5);
}好了，我的濾鏡分享完畢，接下來美圖去了
以上是“css3如何實現過濾效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
