当青训营遇上码上掘金
主题创作背景思路
当我第一次看到这个题目时，便想到了可以使用css的部分较为少见的属性，这样既可以做到耳目一新，也可以去学习css中较为冷门的知识，在查阅资料后，想到了clip-path。
clip-path的基本语法
inset
inset(): 定义一个矩形
inset( <length-percentage>{1,4} [ round <border-radius> ]? )
- 前四个指剪裁位置，top，right，bottom，left
- 后面两个参数可选，圆角，还有圆角度数。
circle
circle(): 定义一个圆
circle( [ <shape-radius> ]? [ at <position> ]? )
- 可传入两个可选参数
- 圆的半径，默认元素宽高中短的那个为直径，支持百分比
- 圆心位置，默认为元素中心点
ellipse
ellipse(): 定义一个椭圆
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
- 可传入3个可选参数
- 椭圆的X轴半径，默认是宽度的一半，支持百分比
- 椭圆的Y轴半径，默认是高度的一半，支持百分比
- 椭圆中心位置，默认是元素的中心点
polygon
polygon(): 定义一个多边形
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
- 第一个是传入填充规则
<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero - 后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点
实现过程
提出问题
最后想的效果是，当鼠标移到名片上的时候，有种推开门的感觉，单纯的矩形过于单调，背景图和推开的部分图片是一致的，然后主题名称缓缓出现，这样我们遇到的问题有：
- 使用boder方法实现三角形很难去控制背景图的一致
- 文字样式的美化
解决过程
- 我们可以使用
lip-path:ellipse()定义一个直角梯形，然后两片门重叠在背景图上，这样我们就可以实现背景图的统一了 - 文字样式，使用了
letter-spacing:;增加文字间距，使用了-webkit-text-stroke:;添加了文字的描边， - 通过调整几个图层的层级，还有透明度，最终给我们一个在山中若隐若现的效果，然后在鼠标移上去出发：hover的之后字体变得明显起来。
