网站美化-拟态效果[CSS新拟态]-星雨博客

温馨提示：本文最后更新于2024-09-17 09:32:55，某些文章具有时效性，若有错误或已失效，请联系星雨站长！

代码样式由初一提供，效果可以参考本站，还是很不错的！

为了演示效果，你当前所在页面使用了本效果！

CSS代码

样式根据自己的需要自行修改！

.box{
    background: linear-gradient(180deg, #ecf2ff, #fff) ;
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 #fff ;
    transition: all 0.2s;
}

如果觉得拟态程度不够，那么你可以使用下面这个css

.box {
    background-color: #ebecf0;
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    border-radius: 30px;
    transition: all .2s;
    -webkit-transition: all .2s;
}