用张名片介绍自己，我想要放上我的名字、联系方式、主要工作和领域等。
名片的设计
身为前端程序员，同时热爱CSS这门技术，我想要将这张名片做得好看。
配色和背景
我选择了比较喜欢的渐变的背景色彩来装饰我的名片，并且背景色彩会从内部向外处扩散，边框加上一些弧度，更显美观，核心CSS代码如下：
.card {
box-sizing: border-box;
position: relative;
width: 300px;
height: 200px;
padding: 10px;
background: linear-gradient(135deg, #f403d1, #64b5f6);
border-radius: 4px;
}
.card::after {
content: '';
position: absolute;
left: 0;
top: 20px;
z-index: -1;
width: 300px;
height: 200px;
background: linear-gradient(135deg, #f403d1, #64b5f6);
filter: blur(25px);
}
card是这张名片容器的类名，背景颜色主要由linear-gradient 这个属性实现。为了实现背景色名片外扩散的效果，还需要一个after元素，通过filter 属性向外部扩散，并且将整个向下偏移，实现类似阴影的效果。注意需要设置z-index避免它覆盖我们的卡片内容。效果如下：
内容和排版
接下来为这张名片写上内容。我喜欢简单且直接的表达，所以会用较多图标表达，用较少文字展示重要信息。我把这张名片分成3行，即3个部分。
- 个人信息：头像 名字 个人主页等
- 描述文本：想要描述自己的一些文本
- 描述图像：用最简单的方式介绍自己
最后的效果如下：
对每一行进行分析。第一行使用Flex布局，将个人信息和个人主页通过justify-content: space-between的方式将这两部分放在左右两边。第二行是一些文本，主要是文字大小的处理，表达自己的领域和想要说的话。第三行也是一行罗列的图标，展示自己喜欢的一些技术。
内容核心
正如名片所见，最核心的是展示图标，能够让人第一眼看见就了解自己。下面就来分析这些图标的统一实现。
我将图片用i标签包裹，用border-radius: 50% 来实现圆形的边框，即圆形图标。对于img的处理，我给它宽高设置成100%，即i标签的100%宽高，这样能够完全被包裹中。另外，img的边框弧度是继承i标签的，这样能够展示不同边框的图标。
总结
这次活动，我实现了以前非常喜欢的设计，来展示这张卡片。可惜准备时间较短，技术有些不足，不能将它设计的更加完美。希望能够在前端的成长道路上，坚持自己喜欢的UI编程，设计美观的UI，提高自己的审美。
