当青训营遇上码上掘金
作为一个基本没有接触过前端设计的小白，我想到的第一个设计工具就是PPT，上图是用PPT做的名片
那么应该怎样使用CSS将其复现出来呢？（本代码未使用JS）
代码要点
由于时间紧迫，而且码上掘金引入three.js无法解决，这里比较复杂的棱台，基座和3d文字以图片形式插入其中
而左侧不规则多边形，使用了clip-path属性的polygon()函数进行绘制。
模拟PPT中形状自带的阴影使用box-shadow属性进行设置。
注：ICON来自iconfont iconfont-阿里巴巴矢量图标库
本次编程学习到的知识点
- clip-path绘制多边形
- opacity不透明度会继承，容器内元素即使重新设定opacity:1仍然会继承容器的不透明度
- position:relative 会与html中同容器内的前一个元素的位置进行比较
- box-shadow: 0 0 5px 1px #999 ; 适用于浅色背景
- box-shadow: 0 0 5px 1px black ; 适用于深色背景
- 使用 linear-gradient() 制作渐变色，默认是从上到下
对比效果
经过对比可以看出，字体，位置上都没有PPT做出的代码美观，而且棱台使用图片插入后很多细节丢失了，当然，这很大程度是由于我的技术水平不足所导致的。
吐槽和间歇性的发奋图强
编程的体验和制作PPT的体验完全天差地别。
PPT可以拖拽的方式调整元素的位置，但是CSS希望元素放置到指定位置需要调整相对位置或绝对位置，不是很直观。距离的大小更需要经验来判断。
而且编程时发现即使设定了容器的宽度和高度，如果容器内不填充，也就是一个空标签，很有可能在浏览器中显示的宽度是0。
另外，CSS的实现方式也不一定能够完全替代PPT，PPT有更多的交互和动画效果，可以更好地表现出设计师的想法和创意，而CSS的动画个性化设置却很繁琐。
但是，我同样知道的是，学习CSS可以增加灵活性和可扩展性，可以适应不同的需求和设计风格。在学习CSS的过程中，我需要不断地积累经验，学习不同的技巧和实现方式。相信我能够通过不懈努力，提升技术水平，从而能够真正完美复现上面的PPT。
