「青训营 X 码上掘金」主题创作活动——我的名片

当青训营遇上码上掘金
我正在参加「青训营 X 码上掘金」主题创作活动入营版:juejin.cn/post/718775…

主题选择

我选择的是主题一:

主题 1：我的名片 名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

成果展示

创作过程

1. 设置背景
   纯黑的页面背景太单调，于是决定弄一个渐变的背景。通过CSS的radial-gradient实现：
   

body{
            height: 100vh;
            background: radial-gradient(ellipse at bottom,#204773,#111);
        }

radial-gradient的语法是这样子的：
background: radial-gradient(size shape at position,start-color, ..., last-color);
我选择的是椭圆的形状放在底部，颜色是选择了一个偏蓝灰的颜色和一个偏黑的颜色。

2.卡片部分
卡片必须安排圆角，直角太奇怪了。用CSS的border-radius调到适合的值：
border-radius: 25px;

头像的图片本来是1：1的正方形，为了美观考虑，直接裁剪成圆形。用CSS就能完成，只需把border-radius的值调成50%

3. 修饰
   为了凸显这个名片，我加一一个发光的效果，一下子高级感就来了。实现这个功能要用到CSS的filter滤镜，这里只需要用到filter: drop-shadow,它的语法是这样子的：
   drop-shadow(offset-x offset-y blur-radius spread-radius color)
   参数：

   offset-x offset-y （必须）：x偏移和y偏移

   blur-radius（可选）：模糊大小，默认为0

   color（可选）：色值
   我设置了一个0偏移、模糊大小6px、带蓝色的阴影就得到了边缘发光的效果。
   filter: drop-shadow(0 0 6px #699bff);

收获与感悟

通过这次“码上掘金”的活动，我锻炼了自己的动手能力，在实际开发中学到了很多东西，也发现了自己的不足之处。果然“实践出真知”，一些东西只有你真正去做，去动手，才能真正掌握。最后呢，希望自己在这届青训营里能够充分锻炼自己，收获到更多的coding经验，学到更多知识，加油！