今天进行技术分享的是 @lena 和 @ellen 精彩分享内容如下：
@lena
1.img.desaturate {
filter: grayscale(100%);（黑白）
filter:sepia(100%);(褐色)
filter:saturate(0.5);(饱和度)
filter:hue-rotate(90deg);（色相旋转）
filter:invert(1);（反色）
filter:blur(3px);(模糊)
filter:contrast(2);(对比度)
filter:brightness(.5);(亮度)
}
2.<p contenteditable="true">,用户能够修改页面上的内容。
3.<p dir="ltr">从左到右</p>
<p dir="rtl">从右到左</p>
4.spellcheck="true|false" 提示拼写错误，只能放在可以编辑的地方
5.cursor: url(jartto.cur), url(https://jartto.wang/jartto.gif), auto;
css cursor url用法详解
6..icon {
display: inline-block;
width: 16px;
height: 20px;
background-image: url(http:jartto.wang/test.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
background-position: 0 0;
}
.link:hover {
color: #333; /* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
}
http://blog.jobbole.com/79080/
7.如何去掉 chrome input 的背景黄色
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;
}
当然，你也可以使用方案二，如下：
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes autofill {
to {
color: #fff;
background: transparent;
}
}
8. border-color: red green blue pink;border渐变
9.filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
filter:drop-shadow(5px 5px 10px black)
CSS3 滤镜 filter 中的 drop-shadow，drop-shadow 滤镜可以给元素或图片非透明区域添加投影。
10.https://www.cnblogs.com/lyd2016/p/6139383.html
/*滚动条 start*/
::-webkit-scrollbar {
width: 1px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #fff ;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
// background-color:rgba(7, 170, 247, 0.7);
background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(7, 170, 247, 1);
}
@ellen 分享了一个展示同一列多个相关产品的JS：
var swiper = new Swiper('.relative-container', {
slidesPerView: 4,
spaceBetween: 15,
// init: false,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 15,
},
768: {
slidesPerView: 3,
spaceBetween: 15,
},
640: {
slidesPerView: 2,
spaceBetween: 15,
},
320: {
slidesPerView: 1,
spaceBetween: 15,
}
}
});
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
slidesPerColumn: 3,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
767: {
slidesPerView: 1,
},
}
});