CSS伪元素mix-blend-mode: color;属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何

本案例出自前端小H

案例1

通过伪元素创建前后两个部分，用定位将他们拼在一起，filter设置高斯模糊，做出阴影效果
倾斜在放在div的后面

 <style>
        .elem{
            position: relative;
            width: 400px;
            height: 150px;
            margin: 100px auto;
            background: #eee;
        }
        .elem::before,.elem::after{
            top: 2px;
            width: 50%;
            height: 100%;
            content: "";
            position: absolute;
            filter:blur(3px);
            z-index: -1;
        }
        .elem::before{
            left: 0;
            background: #000;
            transform: skewY(-2deg);
        }
        .elem::after{
            right: 0;
            background: #000;
            transform: skewY(2deg);
        }
    </style>
</head>
<body>
    <div class="elem"></div>
</body>

案例2

用padding将div的右边空出位置放伪元素的方块，伪元素相对于div定位
currentColor继承父元素的颜色
当鼠标滑过超链接处，右边的伪元素出现放大效果

<style>
        body{
            font-family: 'Rubik', sans-serif;
        }
        a {
            text-decoration: none;
            font-weight: bold;
        }
        a:hover{
            text-decoration: underline;
        }
        a::after{
            position: absolute;
            content: '';
            width: 150px;
            height: 100px;
            background: currentColor;
            opacity: .8;
            transition:.3s ease-out;
        }
        .link-1:after{
            right: 0;
            top: 10px;
        }
        .link-2:after{
            right: 40px;
            top: 50px;
            transform: rotate(10deg);
        }
        .link-1{
            color: blueviolet;
        }
        .link-2{
            color: dodgerblue;
        }
        .hero{
            position: relative;
            margin: 10px auto;
            width: 500px;
            padding-right: 16rem;
        }
        .link-1:hover::after{
            transform: scale(1.2);
            opacity: 1;

        }
        .link-2:hover::after{
            transform: scale(1.2) rotate(10deg);
            opacity: 1;
        }
    </style>
</head>

<body>
    <section class="hero">
        <p>Hello, my name is Ahmad. I’m a UX Designer and Front End Developer that enjoys the intersection between
            design and code. I write on <a href="www.ishadeed.com" class="link-1">ishadeed.com</a> and <a
                href="www.a11ymatters.com" class="link-2">a11ymatters.com</a> on CSS, UX Design and Web Accessibility.
        </p>
    </section>

</body>

案例3

通过伪元素绝对定位到div上面，伪元素的背景用渐变色
mix-blend-mode: color;属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

<style>
        body{
            font-family: 'Rubik', sans-serif;
        }
        a {
            text-decoration: none;
            font-weight: bold;
        }
        div{
            margin: 100px auto;
            width: 500px;
            height: 200px;
            position: relative;
            background:url("https://c-ssl.duitang.com/uploads/item/201206/11/20120611175636_S4sPv.thumb.700_0.jpeg") no-repeat center/cover;
        }
        div:after{
            content: '';
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom,red 0% ,blue 100%);
            mix-blend-mode: color;
        }
        
    </style>
</head>

<body>
    <div></div>

</body>