CSS 滤镜如何实现内凹平滑圆角效果

CSS滤镜可以实现多种视觉效果，包括投影、模糊、亮度控制，但是要实现内凹平滑圆角效果，其实不是依赖滤镜，而是要依赖于border-radius属性和阴影或者其他技巧。内凹圆角通常通过在内部阴影(box-shadow)和边界半径(border-radius)的配合使用来实现。具体做法是为元素设置一个较大的border-radius来创建圆角效果，并通过应用向内的box-shadow来实现看似内凹的视觉效果。这种效果借助于视觉上的微妙阴影和光线变化来营造深度和凹陷感，使得元素看起来好像被按压进页面之中。

一、内凹圆角的基本实现

内凹圆角可以通过CSS的box-shadow属性来实现，这里需要重点讲解box-shadow属性。box-shadow用于在元素的框架上添加阴影效果，它可以设定为内部阴影或外部阴影。对于内凹效果，我们关注的是内阴影(inset)，它的值包括横向偏移、纵向偏移、模痕半径、扩散距离和颜色。来看看基本的CSS如何实现这一效果：

.inner-concave {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: inset 5px 5px 10px #cbced1,
                inset -5px -5px 10px #ffffff;
}

在这段代码中，我们创建了一个带有平滑圆角的正方形，它有向内的阴影效果。通过给box-shadow加上inset关键字，阴影就从元素外部变为了内部。

二、探索CSS3新属性

随着CSS的发展，许多新属性被引入以创造更多复杂且吸引人的视觉效果。例如clip-path属性可以被用来剪裁元素到某个特定的形状，filter属性可以应用图形滤镜效果如模糊或颜色偏移。

.clip-path-concave {
    background-color: #fff;
    clip-path: ellipse(50% 50% at 50% 50%);
    box-shadow: inset 5px 5px 10px #cbced1,
                inset -5px -5px 10px #ffffff;
}

在这个样例中，clip-path定义了一个椭圆形状，与box-shadow共同作用于元素，产生一个独特的内凹效果。

三、高级效果与技巧

要实现更高级的内凹效果，可以使用伪元素和多层阴影的技巧。伪元素可以在不增加额外HTML标签的情况下，在CSS中创建新的视觉元素。使用:before或:after伪元素，你可以在元素的内部或外部添加额外的形状或阴影，以加深内凹或凸起效果。

.advanced-concave {
    position: relative;
    background-color: #fff;
    border-radius: 20px;
}
.advanced-concave:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    box-shadow: inset 5px 5px 10px #cbced1,
                inset -5px -5px 10px #ffffff;
    border-radius: 15px;
}

通过这种方式，你可以为元素添加两层阴影效果，第二层来自于伪元素，由于它比元素本身小，因此它周围的阴影会加重元素的内凹效果。

四、配合其他CSS3属性增强效果

CSS变量和过渡可以用来实现当用户与页面交互时的动态效果。例如，你可以设置一个变量来控制内凹深度，并在用户鼠标悬停在元素上时改变这个值，这将使内凹效果随着用户的交互而变化。

.concave-interaction {
    --concave-depth: 5px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: inset var(--concave-depth) var(--concave-depth) 10px #cbced1,
                inset calc(-1 * var(--concave-depth)) calc(-1 * var(--concave-depth)) 10px #ffffff;
    transition: box-shadow 0.3s ease;
}
.concave-interaction:hover {
    --concave-depth: 10px;
}