2018年1月8日 | | 标签:

今天进行技术分享的是 @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,
        },
      }
    });