实现轮播图左右黑色模糊过渡效果的 CSS 方法

引入：

模仿idea网站时，两个轮播图左右都有黑色的黑色模糊过渡效果

发表一下我的做法，可能只适合模仿的时候用，后面应该有更好的方法。

首先了解一个知识点filter：

css中的一种功能，其基本语法为filter: blur()【length是一个长度值，可以使用px，也可以用%，值越大，模糊效果越明显】

了解到filter可以有模糊效果，如果你直接对一整个盒子去写filter是错误的，因为它只能是作用于全局的，无法直接指定轮播图的哪个位置，所以这个时候我们可以使用伪元素::before和::after，如下（具体位置根据实际需求更改）

.block_main::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 310px;
    left: -80px;
    top: -10px;
    background-color: #000;
    filter: blur(20px);
    z-index: 5;
}

.block_main::after {
    position: absolute;
    content: "";
    top: -40px;
    left: 1380px;
    width: 100px;
    height: 310px;
    background-color: #000;
    filter: blur(20px);
     z-index: 5;
}`

//因为想要实现的是淡淡的模糊感，需要盖住下面的内容，所以需要额外添加z-index