欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 濾鏡 webkit-filter詳細介紹及使用方法

  發(fā)布時間：2012-12-27 16:13:16   作者：佚名   我要評論
CSS3 開始也有濾鏡（不是 IE 的那種濾鏡），這些濾鏡效果最初是用于 SVG 的，W3C 將其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的規(guī)范，Webkit 率先支持了它,需要了解的朋友可以參考下

大家可能對Instagram 這款iPhone APP 上的濾鏡效果很感興趣，其實 CSS3 開始也有濾鏡（不是 IE 的那種濾鏡），這些濾鏡效果最初是用于 SVG 的，W3C 將其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的規(guī)范，Webkit 率先支持了它。

-webkit-filter 的用法
-webkit-filter 用法是標準的 CSS 寫法，如：

復制代碼
代碼如下:

-webkit-filter: blur(2px);

-webkit-filter 支持的效果有：
blur 模糊
brightness 亮度
contrast 對比度
drop-shadow 陰影
grayscale 灰度
opacity 透明度
sepia 褐色
invert 反色
saturate 飽和度
hue-rotate 色相旋轉

下面是這幾種濾鏡具體的效果和代碼，請在最新的 Safari 和 Chrome 瀏覽器上查看效果：

原圖

blur 模糊

-webkit-filter:blur(2px);

brightness 亮度

-webkit-filter:brightness(25%);

contrast 對比度

-webkit-filter: contrast(50%);

drop-shadow 陰影

-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度

-webkit-filter: opacity(50%);

grayscale 灰度

-webkit-filter: grayscale(80%);

sepia 褐色

-webkit-filter: sepia(100%);

invert 反色

-webkit-filter: invert(100%);

hue-rotate 色相旋轉

-webkit-filter:hue-rotate(180deg);

saturate 飽和度

-webkit-filter: saturate(1000%);

相關文章

最新評論