CSS创意与视觉表现

新手引导

代码

CSS代码：
.guide-x {
    text-align: center;
    padding: 100px 16px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
.guide-overlay {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, transparent);
}
.guide-overlay-shape {
    width: 100px; height: 60px;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
}
HTML代码：
<div class="guide-x">
    <div class="guide-overlay">
        <i class="guide-overlay-shape" data-content="发布按钮搬到这里了"></i>
    </div>
    <button class="button">发布</button>
</div>

实现的关键就是使用巨大尺寸的box-shadow扩展模拟镂空。

也可以使用径向渐变实现，但没有box-shadow好理解好上手。