利用渐变+伪元素选择器做立体阴影效果

最新推荐文章于 2024-08-22 19:42:28 发布

无聊的猴子。

最新推荐文章于 2024-08-22 19:42:28 发布

阅读量290

点赞数

本文链接：https://blog.youkuaiyun.com/m0_51774413/article/details/119080824

版权

首先利用div创立一个盒子，然后定义宽高，这里我将width设置为400px，height也是400px，

然后设置一个径向渐变，这里我是这样设置的

background:radial-gradient(circle at 10% 20% ,yellow,red ,black) ;这次我要实现的立体效果是一个圆形，所以在设置一个border-radius: 50%;到这里就已经完成了立体图的第一步，接下来便是设置阴影了，这里我们需要用到::after伪元素选择器，我们可以利用绝对定位把阴影图放到适当的位置，”子绝父相“这里我们要给div这个盒子加一个相对定位。之后就可以根据自己的需求调整阴影位置了，为了使阴影效果更加逼真，可以设置一下阴影透明度。效果如图代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 400px;
            height: 400px;
            background:radial-gradient(circle at 10% 20% ,yellow,red ,black) ;
            border-radius: 50%;
            margin-left: 300px;
        }
        .box::after{
            content: "";
            position: absolute;
            top: 300px;
            left: 295px;
            width: 600px;
            height: 200px;
            border-radius: 50%;
            background-color: black;
            opacity: .3;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>