修出雅观的肖像,css3中filter的各个特效

何以用 CSS 修出美观的照片

2017/12/01 · CSS ·
照片

原作出处:
如梦令   

我们常见会经过PS,美图秀秀等来编排照片,制作比较适合意境的的机能图片(图骗),不过编辑器和PS的切换是有本钱的,要是能在编辑器中急速并且批量的处理图片岂不是很好。那篇文章没有多么高深的代码,只是某个平常便于忽略并且很受用的小技巧。

近年来四处看到有人在说CSS3的filter直接没有时间友好去测试这成效。后天好不简单抽出时间攻读那个CSS3的Filter。不整不知道呀,一整才让本身备感吃惊,太强大了。大家先来看个效益啊:

  在完结特定展现效果的页面中,css的filter属性是一种强大的工具。它能让大家的页面特别地天性化并缩减PS方面包车型地铁做事。filter的属性值主要有以下十种:

css3中的filter属性能够算得简单易用且强大,这一个职能成效在图纸上达成部分神效(也得以成效在vidio上,此处只谈谈图片特效)。

修图利器之 CSS Filters

P图怎么能少了滤镜呢,css提供了很各样滤镜:

  1. drop-shadow
  2. sepia
  3. blur
  4. hue-rotate
  5. invert
  6. brightness
  7. contrast
  8. opacity
  9. grayscale
  10. saturate
    1. blur
    2. grayscale
    3. sepia
    4. saturate
    5. hue-rotate
    6. invert
    7. brightness
    8. contrast
    9. opacity
    10. drop-shadow

浏览器包容性

drop-shadow 下跌式阴影

丰裕影子效果可不光有text-shadow和box-shadow哦,text-shadow是为文字添加阴影,box-shadow给三个成分添加阴影,drop-shadow在图片是非png情状下和box-shadow有个别相似,不过png图片才是她大放异彩的地点

拿一张jpg图片来举个栗子看下drop-shadow 和 box-shadow的界别:

美高梅开户网址 1

//从左往右依次是原图,添加drop-shadow-jpg,添加box-shadow
.drop-shadow-jpg{ -webkit-filter: drop-shadow(10px 10px 10px
rgba(255,235,59,0.74)); } .box-shadow{ box-shadow: 10px 10px 10px
rgba(255,235,59,0.74); }

1
2
3
4
5
6
7
//从左往右依次是原图,添加drop-shadow-jpg,添加box-shadow
.drop-shadow-jpg{
    -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));
}
.box-shadow{
    box-shadow: 10px 10px 10px rgba(255,235,59,0.74);
}

drop-shadow分明更温柔一些,并且图片的方面和右边也是有阴影的啊。

再来看下drop-shadow在png图片的显现呢,右边为原图:

美高梅开户网址 2

.drop-shadow-png{ -webkit-filter: drop-shadow(10px 10px 10px
rgba(255,235,59,0.74)); }

1
2
3
.drop-shadow-png{
    -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));
}

修出雅观的肖像,css3中filter的各个特效。因为png图片背景是晶莹剔透的,所以drop-shadow直接功用于图片的内容,图中的小女孩是还是不是更萌了呢。

美高梅开户网址 3

  本文使用的图形如下:

  近日各大浏览器对于css3的匹配已经万分好了,最新版本都得以支撑css3,老版本的ie9以下的依然不辅助,可是那不是至关首要,微软都准备扬弃那么些老古董了。别的ie的滤镜也是能够形成的,会另加研商。

sepia 花枝墨,铁锈红色,深冰雪蓝影

假如想要个老照片效果

美高梅开户网址 4

.sepia-50{ -webkit-filter: sepia(八分之四); } .sepia-100{ -webkit-filter:
sepia(百分之百) } //safari浏览器不援助

1
2
3
4
5
6
7
.sepia-50{
    -webkit-filter: sepia(50%);
}
.sepia-100{
   -webkit-filter: sepia(100%)
}
//safari浏览器不支持

参数能够是小数也足以是比例,为0的时候是左手原图的法力,1或百分百是最右的法力图哦

自个儿想光看上边包车型地铁职能就能吸引你了,假诺你本人动手的话,作者想你更会觉得神奇。细一看,那些作用如同photoshop整出来的一样,其实是当成那样的,有广大效果都是相仿于photoshop中的特效。然则有好几我们须要特地的注意:此处的CSS3
filter和css
filter一心是两样东东。更不是大家直接说的IE滤镜。具体所指的是何许?大家感兴趣的可以点击这里。
本人就不多说了,因为说也说不清楚,小编只想和大家齐声探索的是怎么利用那一个“CSS3
Filter”。那大家开头吧。

美高梅开户网址 5

前几天标准中辅助的意义有:

blur 模糊

背景图片太清晰有太阿倒持之嫌了?能够设置模糊的作用啊

美高梅开户网址 6

.blur{ -webkit-filter: blur(3px); }

1
2
3
.blur{
    -webkit-filter: blur(3px);
}

blur用来给图像设置高斯模糊。参数值设定高斯函数的标准差,或许是显示屏上以多少像素融在一块,那些值设置为百分比除外的css长度值,私下认可是0效果为左侧的原图,值越大越模糊,下面的图片设置成100px时就怎么样都未曾了。

Filters关键是应用在图纸上,以贯彻部分神效。(固然他们也能选取于video上),不过我们在些只来谈谈图片上的选择。

  一、blur属性。blur的选取格式一般为 filter: blur(1px);
-webkit-filter:
blur(1px); 该属性用来为成分扩大模糊效果,呈现效果如下:

  • grayscale 灰度               值为0-1里面的小数 
  • sepia 淡紫灰         值为0-1时期的小数
  • saturate 饱和度     值为num
  • hue-rotate 色相旋转  值为angle
  • invert 反色        值为0-1里头的小数
  • opacity 发光度     值为0-1以内的小数
  • brightness 亮度     值为0-1时期的小数
  • contrast 对比度     值为num
  • blur 模糊           值为length
  • drop-shadow 阴影

opacity 透明度

opacity会调整图片的发光度,那几个和filter中的opacity效果是相同哒,可是并不是壹脾本性呢,因为她们是足以增大使用的

美高梅开户网址 7

.opacity-20{ opacity: 0.2; } .filter-opacity-20{ filter:opacity(0.2) }
.opacity-both{ opacity: 0.2; filter:opacity(0.2) }

1
2
3
4
5
6
7
8
9
10
.opacity-20{
    opacity: 0.2;
}
.filter-opacity-20{
    filter:opacity(0.2)
}
.opacity-both{
    opacity: 0.2;
    filter:opacity(0.2)
}

她们承受的参数也是有部分差别的,opacity只可以承受小数,filter:opactiy()既能够承受小数也足以接受百分比,值越小越透明。

语法

美高梅开户网址 8

用法是正经的CSS写法,如:

hue-rotate 色相旋转

hue-rotate通过转移图片的色相来改变图片

美高梅开户网址 9

.hue-rotate-90{ -webkit-filter: hue-rotate(90deg); } .hue-rotate-270{
-webkit-filter: hue-rotate(270deg); }

1
2
3
4
5
6
.hue-rotate-90{
    -webkit-filter: hue-rotate(90deg);
}
.hue-rotate-270{
    -webkit-filter: hue-rotate(270deg);
}

hue-rotate
参数是三个角度值,他会承受那些值并把图纸中的颜色的色相做相应的团团转

elm {        filter: none |[]*      }

  二、grayscale属性。grayscale的选拔格式一般为 filter:
grayscale(0.6); -webkit-filter:
grayscale(0.6); 该属性用来设置成分的灰度,能够使彩色图片变为黑白,展现效果如下:

-webkit-filter: blur(2px);

测试浏览器为chrom浏览器44.0版本,示例图片中上方为原图,下方为加fifter效果后的图片。

invert 反转

invert会把图纸上的富有颜色实行反转,假若是指望做个相机底片效果,真的是太适宜了

美高梅开户网址 10

.invert-20{ filter: invert(20%); } .invert-100{ filter: invert(100%) }

1
2
3
4
5
6
.invert-20{
    filter: invert(20%);
}
.invert-100{
    filter: invert(100%)
}

和hue-rotate比较,直接反转就不须求接受颜色变化的角度了,不过你能够设置0~百分之百来支配反转的水平

其私下认可值是none,他不拥有继承性,个中filter-function三个拥有以下值可选:

美高梅开户网址 11

grayscale灰度

  假若选拔该意义参数里没值的话将会以百分之百来渲染,取值0-1以内为不相同的灰度。上面实例为百分百的渲染:-webkit-filter:grayscale(1)
;

美高梅开户网址 12

saturate 饱和度

情调三要素色相,明度,饱和度。饱和度也即颜色的纯度,彩度。无彩色的色饱和度为0,也等于上边的grayscale灰度值为1的时候,饱和度越高,颜色中的灰度越低。

美高梅开户网址 13

.saturate-50{ filter: saturate(50%); } .saturate-200{ filter:
saturate(200%); }

1
2
3
4
5
6
.saturate-50{
    filter: saturate(50%);
}
.saturate-200{
    filter: saturate(200%);
}

饱和度百分之百时为左一原图,接受大于百分之百的值。

grayscale灰度

  三、sepia属性。sepia的选拔格式一般为 filter: sepia(0.6);
-webkit-filter:
sepia(0.6); 该属性用来设置成分的法国红,展现效果如下:

sepia

  橄榄黑,正是美图秀秀里有个怀旧效果的那种效果,取值也是0-1,-webkit-filter:sepia(1)
;

美高梅开户网址 14

brightness 亮度

说完了色相和饱和度再来看看brightness,brightness给图片选择一种线性乘法来调动总体图片的亮度,效果和手提式有线电话机处理器上的的亮度调节是一样的

美高梅开户网址 15

.brightness-4{ filter:brightness(40%) } .brightness-8{
filter:brightness(80%) }

1
2
3
4
5
6
.brightness-4{
    filter:brightness(40%)
}
.brightness-8{
    filter:brightness(80%)
}

brightness的参数能够用百分比来表示也足以用小数来代表,当参数值为0的时候全部图片都以暗黑的了,超过百分之百的时候比原图更亮一些

sepia珍珠白(求专业辅导翻译)

美高梅开户网址 16

saturate饱和度

  该属性改变图片的饱和度,取值范围为数字即可,暗中认可值百分百,示例为800%:-webkit-saturate(6)
;

美高梅开户网址 17

contrast 对比度

contrast用来调整图像的相比度

美高梅开户网址 18

.contrast-50 { filter: contrast(50%) } .contrast-200{
filter:contrast(200%) }

1
2
3
4
5
6
.contrast-50 {
    filter: contrast(50%)
}
.contrast-200{
    filter:contrast(200%)
}

contrast的参数接受百分比格局的数值也承受小数格局的,值为0
的时候是成套图片都以灰棕黄的,为1时是原图,值越大相比度越大,暗中同意值为1。

saturate饱和度

  四、saturate属性。saturate的运用格式一般为: filter:
saturate(0.15); -webkit-filter:
saturate(0.15); 该属性常用来改变图片的饱和度,呈现效果如下:

hue-rotate色相旋转

  hue-rotate用来改变图片的色相,暗许值为0deg,取值为angle,示例:-webkit-filter:hue-rotate(180deg) 

美高梅开户网址 19

grayscale 灰度方式

有格调的灰度情势开启

美高梅开户网址 20

.gray-scale-50{ filter:grayscale(50%) } .gray-scale-100{
filter:grayscale(100%) }

1
2
3
4
5
6
.gray-scale-50{
    filter:grayscale(50%)
}
.gray-scale-100{
    filter:grayscale(100%)
}

grayscale的参数接受百分比和小数,暗许参数是百分百,完全灰度,1以内的值越大越走近完全灰度,大于等于1的值的功能是同等哒

hue-rotate色相旋转

美高梅开户网址 21

invert反色

  invert的机能就和照片底片有点相似,示例:-webkit-filter:invert(1) 

美高梅开户网址 22

修图利器之 Blend Modes

CSS3的犬牙相错方式决定了两个图片/图层叠加在一起的时候显得的效果。关于混合情势的算法能够在维基百科上询问。差异的形式值对应了区别的算法,最终决定了图片混合格局效用。相关的五个属性是mix-blend-mode和background-blend-mode,background-blend-mode首即使效果于同2个background属性下的背景图片或许背景象。

混合情势的值的照应效果能够完全类比PS中图层情势成效,他们的应和关系是:

  1. normal 符合规律方式
  2. multiply 正片叠底模式
  3. screen 滤色格局
  4. overlay 叠加形式
  5. darken 变暗方式
  6. lighten 变亮情势
  7. color-burn 颜色加深方式
  8. hard-light 强光形式
  9. soft-light 柔光情势
  10. difference 差值方式
  11. exclusion 排除方式
  12. hue 色相方式
  13. saturation 饱和度形式
  14. color 颜色方式
  15. luminosity 亮度形式

invert反色

  五、hue-rotate属性。hue-rotate的应用格式一般为: filter:
hue-rotate(189deg); -webkit-filter:
hue-rotate(189deg); 该属性常用来改变图片的色相,显示效果如下:

opacity透明度

  这一个个性温常遭逢,示例:-webkit-filter:opacity(0.3)

美高梅开户网址 23 

mix-blend-mode 式

mix-blend-mode首要功效是把指标成分和其江湖的背景成分糅合。

美高梅开户网址 24

图片来自于caniuse.com

立时开头:

美高梅开户网址 25

那是两张原图

<code><div class=”mix-blend-mode”> <img
src=”./images/girl.jpg” alt=”girl.jpg”/><img
src=”./images/minion.jpg” alt=”minion.jpg”/></div>
</code>

1
2
3
<code><div class="mix-blend-mode">
        <img src="./images/girl.jpg" alt="girl.jpg"/><img src="./images/minion.jpg" alt="minion.jpg"/></div>
</code>

/*让两张图纸重叠在协同*/ .mix-blend-mode{ position:relative }
.mix-blend-mode img{ position:absolute }

1
2
3
4
5
6
7
/*让两张图片重叠在一起*/
.mix-blend-mode{
    position:relative
}
.mix-blend-mode img{
    position:absolute
}

接下来就能够给小黄种人图片添加mix-blend-mode啦,因为小女孩图片排在小黄人上面,所以如若给小女孩图片添加效果的话是看不到别的成效的。

美高梅开户网址 26

.mix-normal{ mix-blend-mode: normal; } .mix-color{ mix-blend-mode:
color; } .mix-color-burn{ mix-blend-mode:color-burn; } .mix-color-dodge{
mix-blend-mode: color-dodge; } .mix-darken{ mix-blend-mode: darken; }
.mix-difference{ mix-blend-mode: difference; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mix-normal{
    mix-blend-mode: normal;
}
.mix-color{
    mix-blend-mode: color;
}
.mix-color-burn{
    mix-blend-mode:color-burn;
}
.mix-color-dodge{
    mix-blend-mode: color-dodge;
}
.mix-darken{
    mix-blend-mode: darken;
}
.mix-difference{
    mix-blend-mode: difference;
}

美高梅开户网址 27

.mix-exclusion{ mix-blend-mode: exclusion; } .mix-hard-light{
mix-blend-mode: hard-light; } .mix-hue{ mix-blend-mode: hue; }
.mix-inherit{ mix-blend-mode: inherit; } .mix-initial{ mix-blend-mode:
initial; } .mix-lighten{ mix-blend-mode: lighten; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mix-exclusion{
    mix-blend-mode: exclusion;
}
.mix-hard-light{
    mix-blend-mode: hard-light;
}
.mix-hue{
    mix-blend-mode: hue;
}
.mix-inherit{
    mix-blend-mode: inherit;
}
.mix-initial{
    mix-blend-mode: initial;
}
.mix-lighten{
    mix-blend-mode: lighten;
}

美高梅开户网址 28

.mix-luminosity{ mix-blend-mode: luminosity; } .mix-overlay{
mix-blend-mode: overlay; } .mix-saturation{ mix-blend-mode: saturation;
} .mix-screen{ mix-blend-mode: screen; } .mix-soft-light{
mix-blend-mode: soft-light; } .mix-unset{ mix-blend-mode: unset; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mix-luminosity{
    mix-blend-mode: luminosity;
}
.mix-overlay{
    mix-blend-mode: overlay;
}
.mix-saturation{
    mix-blend-mode: saturation;
}
.mix-screen{
    mix-blend-mode: screen;
}
.mix-soft-light{
    mix-blend-mode: soft-light;
}
.mix-unset{
    mix-blend-mode: unset;
}

添加了mix-blend-mode属性的图纸除了可以对其下部的图形叠加,仍是可以够对其背景象叠加,左一为原图,依次给右侧4张图片添加上面css中的样式,并且给他俩的父成分设置石磨蓝背景,然后,各样方法形态的小白种人出现了!

美高梅开户网址 29

.mix-background-lighten{ mix-blend-mode: lighten; }
.mix-background-screen{ mix-blend-mode: screen; }
.mix-background-difference{ mix-blend-mode: difference; }
.mix-background-luminosity{ mix-blend-mode: luminosity; }

1
2
3
4
5
6
7
8
9
10
11
12
.mix-background-lighten{
    mix-blend-mode: lighten;
}
.mix-background-screen{
    mix-blend-mode: screen;
}
.mix-background-difference{
    mix-blend-mode: difference;
}
.mix-background-luminosity{
    mix-blend-mode: luminosity;
}

opacity透明度

美高梅开户网址 30

brightness亮度

  改变图片的亮度,暗许值为百分之百,示例:-webkit-filter:brightness(0.5) 

美高梅开户网址 31

background-blend-mode

包容性如下:

美高梅开户网址 32
图片来自于caniuse.com

background-blend-mode顾名思义是效益于background-image,background-color的。并且是写在三个background属性后边的图样,颜色哦。

美高梅开户网址 33

.background-blend-mode-self{ background: url(./images/g.jpg) #673AB7
no-repeat; background-blend-mode: unset; } .background-blend-mode-color{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: screen; } .background-blend-mode-luminosity{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: luminosity; } .background-blend-mode-exclusion{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: exclusion; } .background-blend-mode-overlay{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: overlay; } .background-blend-mode-soft-light{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: soft-light; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.background-blend-mode-self{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: unset;
}
.background-blend-mode-color{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: screen;
}
.background-blend-mode-luminosity{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: luminosity;
}
.background-blend-mode-exclusion{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: exclusion;
}
.background-blend-mode-overlay{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: overlay;
}
.background-blend-mode-soft-light{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: soft-light;
}

字数有限,别的的background-blend-mode效果就不贴代码啦。

brightness亮度

  六、invert属性。invert的应用格式一般为: filter: invert(53%);
-webkit-filter:
invert(58%); 该属性用来兑现行反革命色,invert做出来的效益就像我们照相机底面包车型客车效益同样,显示效果如下:

contrast对比度

  那个天性取值和饱满度saturate类似,示例500%:-webkit-filter:contrast(5) 

美高梅开户网址 34

代码地址

  • 何以用CSS修出赏心悦目的相片

contrast对比度

美高梅开户网址 35

blur模糊

  这一个天性改变图片的清晰度,暗中认可值为0,示例:-webkit-filter:blur(1px) 

美高梅开户网址 36

参考文献

  • css
    filters
  • Blend modes – Wikipedia

事实上那么些作用综合使用会有很神奇的效果,后续会写文章介绍哒。

1 赞 收藏
评论

美高梅开户网址 37

blur模糊

  七、brightness属性。brightness的使用格式一般为: filter:
brightness(300%); -webkit-filter:
brightness(300%); 该属性用来设置图片的亮度,呈现效果如下:

drop-shadow阴影

  这么些就像是于box-shadow,给图片加阴影,示例:-webkit-filter:drop-shadow(10px
10px 10px #000)

美高梅开户网址 38

当然,添加多个属性也是可以的,示例:-webkit-filter:saturate(10) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) brightness(1.2);

美高梅开户网址 39

就先这么多了,ie低版本的滤镜效果下次再讨论。

drop-shadow阴影

美高梅开户网址 40

美高梅开户网址,浏览器的包容性

  八、contrast属性。contrast的施用格式一般为: filter:
contrast(二分之一); -webkit-filter:
contrast(51%); 该属性用来改变图片的比较度,突显效果如下:

当前支撑这几个天性的浏览器少得分外,今后只是webkit支持,而且唯有webkit
nightly版本和Chrome
18.0.976以上如上版本才支撑,所以说,你只要想见见功效就供给下载这个版本中的3个,笔者利用的是Google
Chrome
Canary。

美高梅开户网址 41

上面我们一齐来见证这么些意义的兑现进度,首先在页面中有一张图片:

  九、opacity属性。opacity的利用格式一般为: filter: opacity(3/6);
-webkit-filter:
opacity(50%); 该属性用来设置图片的光滑度,展现效果如下:

本人在那边取名为“normal”,表示此图没有其他“filter”效果,那么前边的作用,大家一一将其类名改成对应的效应名。我们看上边包车型地铁代码吧:

美高梅开户网址 42

一、grayscale灰度

  十、drop-shadow属性。drop-shadow的使用格式一般为: filter:
drop-shadow(10px 10px 10px yellow); -webkit-filter: drop-shadow(10px
10px 10px
yellow); 用来给图片扩充阴影效果,与box-shadow类似,显示效果如下:

接纳这一个特效,会把图纸变成铅白的,也便是说你的图形将唯有二种颜色“鲜黄”和“青莲”

美高梅开户网址 43

.grayscale{-webkit-filter:grayscale(1);}

  ps:opacity在IE下的展现格局:

默认值:100%,

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

假若您在grayscale()中从不其余参数值,将会以“百分百”渲染。其功效下图所示:

 

美高梅开户网址 44

二、sepia

sepia不精通什么样译,如今就叫她“深翠绿”,使用那种作用,你的图纸好像很古老的均等

.sepia{-webkit-filter:sepia(1);}

默认值:100%,

万一您在sepia()中一贯不任参数值,将会以“100%”渲染,具体效果如下:

美高梅开户网址 45

三、saturate饱和度

saturat是用来改变图片的饱和度

.saturate{-webkit-filter:saturate(0.5);}

默认值:100%,

美高梅开户网址 46

若是大家将其值变大到300%

.saturate{-webkit-filter:saturate(3);}

美高梅开户网址 47

四 、hue-rotate色相旋转

hue-rotate用来改变图片的色相

.hue-rotate{-webkit-filter:hue-rotate(90deg);}

默认值:0deg

美高梅开户网址 48

五、invert反色

invert做出来的效果就像大家照相机底面包车型地铁效果同样

.invert{-webkit-filter:invert(1);}

默认值:100%

美高梅开户网址 49

六、opacity透明度

那一个就很好精晓了,改变图片的发光度

.opacity{-webkit-filter:opacity(.2);}

默认值:100%

美高梅开户网址 50

七、brightness亮度

改变图片的亮度

.brightness{-webkit-filter:brightness(.5);}

默认值:100%

美高梅开户网址 51

八、contrast对比度

转移图片的相比度,整个psd的,都懂这么些意思

.contrast{-webkit-filter:contrast(2);}

默认值:100%

美高梅开户网址 52

九、blur模糊

一看字面意思就清楚了,改变图片的清晰度

.blur{-webkit-filter:blur(3px);}

默认值:0

美高梅开户网址 53

十、drop-shadow阴影

那个很像box-shadow一样的效劳,给图片加阴影效果

.drop-shadow{-webkit-filter:drop-shadow(5px5px5px #ccc);}

美高梅开户网址 54

那么地点正是filter中的十种效能,当然大家能够依照本人的供给进行自定义:

.custom{-webkit-filter:saturate(5)hue-rotate(500deg)grayscale(0.3)sepia(0.7)contrast(1.5)invert(0.2)brightness(.9);}

美高梅开户网址 55

作品权归我全数。

生意转发请联系我得到授权,非商业转发请表明出处。

原文:http://www.w3cplus.com/css3/ten-effects-with-css3-filter©w3cplus.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图