在电视剧中经常会听到或看到龙珠，当然龙珠是不存在的，但是我们可以用CSS来画个青色珠子。

青色珠子

如果画这个珠子呢？

我们需要画个圆然后给个阴影效果，然后再需要辅助的视觉效果，来让这个圆看着像球的效果。

结构

一个元素即可实现这个效果，如下：

    <div class="container"></div>

样式

首先，我们先让这个容器的位置放在窗口的中间，如下：

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

其次，我们需要利用内外阴影来包裹珠子，使珠子有立体的效果，如下：

.container {
    --size: 20rem;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: radial-gradient( transparent 50%,#fff);

    box-shadow:0 -4rem 2rem #ffeb3b94 inset,
     0 0 1rem #03a9f4,
      0 0 2rem #03a9f4, 
     0 0 5rem #03a9f4;
    position: absolute;
}

在这里我们可以看到用到多层阴影，使用多层阴影往往会起到很多的效果，比如：发光效果、凹凸效果、重复图案效果等，下面就是使用阴影得到的珠子容器的效果。

最后就是画一个青色的珠子，当然你也可以用其他颜色，然后把珠子放在容器中，如下：

.container::before {
    content: '';
    width: 80%;
    height: 80%;
    border-radius: 50%;
    position: absolute;
    left: 10%;
    top: 10%;
    background: radial-gradient(cyan, transparent 10%),radial-gradient(#20f6f661, transparent 70%);
}

这里用到了伪元素before，实现的最终效果如下：

总结

青色珠子已完成，但是大家有没有联想到什么呢？

我感觉这个效果可以用来显示化学分子结构，可以用不同的颜色代表不用的化学元素。你有想到还可以用来表达什么吗，可以留言一起成长。

用好阴影可以呈现不同的效果，大家可以多尝试一下。