[分享]css中div凸起的手机

CSS中的DIV凸起效果在手机上会让页面有更好的视觉效果和交互体验。实现DIV凸起的方式有很多，这里我们介绍一种较为简单的方式。 .convex{ width: 80; height: auto; p...

CSS中的DIV凸起效果在手机上会让页面有更好的视觉效果和交互体验。实现DIV凸起的方式有很多，这里我们介绍一种较为简单的方式。

 .convex{
        width: 80%;
        height: auto;
        padding: 1em;
        border-radius: 0.5em;
        background-color: #ffffff;
        box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
        transform: translateY(-0.3em);
    } 

上面的代码定义了一个名为“convex”的CSS选择器，其中“transform: translateY(-0.3em);”实现了DIV的凸起效果。这行代码的含义是：向上移动DIV的位置，使其底部产生凸出的效果。

同时，“box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);”设置了DIV的阴影，增强了凸起效果，使其更加明显。最终效果如下：

如上所示，使用CSS实现DIV凸起效果可以为页面增加更加丰富的视觉效果，让用户得到更好的使用体验。