当青训营遇上码上掘金
前言
最近学习了使用CSS实现颜色渐变的两种写法，我想可以作为个人名片的背景，使其看起来更加美观。 在名片右边放了一张罗小黑的照片，希望自己也能够像罗小黑一样。
主题介绍
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
思路
- 先写一个div，设置长宽高，将背景色设置为粉色，并居中显示
- 用伪元素实现颜色渐变
- 完成文字部分
文字部分
名字使用标签h2定义。名字旁边是自己的一个小小目标，使用标签sspan定义 电话和邮箱等具体信息使用ul、li列表实现
颜色渐变具体实现
CSS的颜色渐变属性有两种类型：
- 线性渐变：
background: linear-gradient(direction, color-stop1, color-stop2, ...);线性渐变的默认方向是从上到下，也可以使用top、left、right、bottom等属性改变渐变方向， 例如background: linear-gradient(to top right, #000 , #fff);
也可以用角度改变，例如
background: linear-gradient(45deg, #000, #fff);/*逆时针旋转45度*/
background: linear-gradient(135deg, #000, #fff);/*效果一样*/
-
径向渐变：
background: radial-gradient(shape size at position, start-color, ..., last-color);径向渐变的默认方向是从内到外，也可以指定渐变的中心、形状和大小， 例如background: radial-gradient(circle,#000, #fff,#efe6f1); -
名片左下角 使用线性渐变。使用伪元素：before来定义，颜色过渡选择蓝色过渡到粉色，中间色选择透明色 并且选择逆时针旋转45度来实现
-
名片右边 使用径向渐变。使用伪元素：after来定义，颜色过渡依旧选择蓝色过渡到粉色，中间色选择透明色，可以消除边界线
