持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

当你凝望深渊的时候，深渊也在凝望着你。今天来做一个隧道入口的效果，当然你可以把它看成一个门，一个让你想探索其背后神秘的门。

隧道入口

结构

别小看一个元素，它也是可以做很多事情的，接下来我们就来看它的表演吧。

<div></div>

样式

首先，我们要把隧道的切面给画出来，黄色部分是甬道，青色部分是洞门，如下：

 div {
    width: 10rem;
    height: 5rem;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background: wheat;
    box-shadow: 0 -0.5rem 0 0.5rem cyan ;
}

这个效果主要用到阴影和边变形，如果你想让通道更宽，可以改变宽度来实现。

其次，我们需要给它加点阴影以形成立体的效果，如下：

div {
    width: 10rem;
    height: 5rem;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    box-shadow: 0 -0.5rem 0 0.5rem cyan,
        0 -1rem 2rem cyan,
        0 -2rem 4rem cyan,
        0 -2rem 6rem cyan;
}

这个我们把背景色取消，或者设置为透明都可以，然后再多加几层阴影就变成我们想要的效果，如下：

总结

把自己放在黑暗的空间，突然一个熠熠发光的门出现在你的面前，门后一片漆黑，犹如深渊，你有没有想一探究竟的冲动呢？

言归正传，其实主要是想做个隧道入口的画面，这个立体的效果我们可以通过阴影属性来实现。当然，我们也可以通过一些简单的变形可以让他变得不一样，比如把宽度增加，就是另外一种感觉了。

希望可以在这个基础上，做一些变形，实现更好玩的效果，欢迎大家留言。