这是我参与8月更文挑战第6天，活动详情查看：8月更文挑战
yyds项目经理：明天之前我要六张不一样的姑姑
我：？what ？
内心OS：UI呢 ？打麻将去了吗？UI俩分钟的事，这让前端怎么破？ 虽然姑姑的盛世美颜很养眼，但也不能这么摧残人啊。。。
没办法，项目经理一句话，前端十根发🤷♀️
怎样才算不一样，那只能用“有色的眼睛”去看了，那就给她加滤镜吧。
css3 filter给图片添加滤镜。
来个暖色调，温柔的邻家姑姑就出来了
/* 调整图片褐色和饱和度 */
.img1{
-webkit-filter:sepia(25%) saturate(200%);
filter:sepia(25%) saturate(200%);
}
来个灰度，怀旧感姑姑出炉
/* 调整图片对比度与褐色 */
.img2 {
-webkit-filter:contrast(110%) sepia(45%);
filter:contrast(110%) sepia(45%);
}
再加个亮度，活力版姑姑来了
/* 调节图片亮度 */
.img3 {
-webkit-filter:brightness(125%);
filter:brightness(125%);
}
女神嘛，遥不可及，再来个朦胧美
/* 给图片添加模糊效果 */
.img4 {
-webkit-filter:blur(2px) ; // blur(可选)值越大，越模糊
filter: blur(2px);
}
毕竟姑姑也是凡人，总有花边新闻不是，加个花边吧
/* 给图片添加阴影,透明度 */
.img5 {
-webkit-filter:drop-shadow(10px 6px 11px #E28C50) opacity(60%);
filter:drop-shadow(10px 6px 11px #E28C50) opacity(60%);
}
drop-shadow(h-shadow v-shadow blur spread color)
- h-shadow v-shadow (必须)设定水平、垂直方向阴影距离
- blur(可选)值越大，越模糊
- spread(可选)正值会使阴影扩张和变大，负值会是阴影缩小.
- color(可选)
估计看到这都忘了之前的效果，最后来张大合集
最后祝大家七夕快乐，yyds。。。😑
