css 样式代码收藏

1.文字渐变

color:#DBA465;
                background-image: linear-gradient(to bottom, #fffefc 20%, #fdd050);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
第二种实现 神器mask-image

  .gradient-text-two[data-content]::after{
            content:attr(data-content);
            display: block
            position:absolute;
            color:yellow;
            left:0;
            top:0;
            z-index:2;
            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
        }

 

2.边框渐变
我自己的：
(圆角)
border: solid 2px transparent;//圆角按钮 去掉背景渐变产生的边框
background-image:linear-gradient(145deg, #7C532F 12%, #953E54 99%);
border-radius: 7.5px;

border: solid 3px transparent;
background-image: linear-gradient(to bottom, #ffe49b -37%, #ffc24a 116%), linear-gradient(to bottom, #ffe3a0, #db6d1e);
background-origin: border-box;
background-clip: content-box, border-box;

网上例子：
.border-image-clip-path {
    width: 200px;
    height: 100px;
    margin: auto;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);//圆角按钮的时候 这个属性裁切的不好，和里面的图片圆角没办法对齐，所以 我改成背景渐变方式实现了
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}

@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rorate(360deg);
    }
}

参考文章：https://juejin.im/post/6844903972281516045

建议收藏：https://chokcoco.github.io/CSS-Inspiration/#/

http://css-tricks.neatbang.com/polygonLayout/#js

https://qishaoxuan.github.io/js_tricks/cookie/

 

 

推荐滚动条样式：

.thumbnail::-webkit-scrollbar{
      width: 5px;
    }
    .thumbnail::-webkit-scrollbar-thumb{
      background: #666;
      border-radius: 5px;
      height: 10px;
      width: 2px;
    }

 

解决z-index 不同层级带来的点击事件穿透问题（比如弹幕覆盖点击区域 点击也能触发响应）

point-event:none 可以不触发当前层的事件 直接透传下一层