当青训营遇上码上掘金
这次活动择了设计名片的主题。本文章打算利用html和css实现一张简单的名片。
主要还是用来进行html和css的练习，本人还算是新手，不过就单纯写一个名片也能复习到很多知识点，这篇文章比起介绍更像是个人知识点总结。
效果如下：
图片背景：
呈现的效果是模糊的背景加上头像和文字，背景模糊了可以突出文字效果，本来想把模糊效果偏向玻璃的样式，但是不太成功。
首先是底层的背景，我的设想是名片能够作为一个组件插入，当没有设置背景时会看到上一层的内容：
background是用来设置背景的属性，最常用的就是background-color: ;，假如想设置图片背景，还有background-image:url();
此外，background还有很多属性，名片相对较小，所以我设置为不重复的背景图片，图片居中，并且完全覆盖。
/* 规定背景图片 */
background-image:url('/back3.jpg');
/* 规定背景图像的位置 */
background-position: center;
/* 规定背景图片的尺寸 */
background-size:cover;`
同时设置圆角，偏圆的边界更有玻璃的感觉。
border-radius: 10px;
然后是模糊效果的容器：模糊效果使用背景滤镜backdrop-filter;背景滤镜有很多的属性，灰度（grayscale）亮度（brightness）对比度（contrast）模糊 （blur）投影 （drop-shadow）色调变化 （hue-rotate）反相 （invert）透明度 （opacity）饱和度 （saturate）褐色（sepia）等等，这里使用模糊 （blur）属性。
然后是周围阴影，inset表示阴影向内
box-shadow:inset 0 0 6px rgba(2, 0, 5, 0.2);
圆形头像使用border-radius，不过div占据的大小还是方格的大小。
/* 圆形 */
border-radius: 50%;
右侧内容用一个div包裹起来，作为父元素，然后再设置内部元素
分隔线是一个简单的div，没有多做文章
个人介绍开头空两格使用属性text-indent: 2em;em，em是一种相对单位，它的单位长度是根据元素的文本垂直长度来决定的。它保证一定是空两个字。
text-indent: 2em;
全部代码：
