10分钟用Html+css写一个渐变背景的个人名片

个人名片在个人博客网站上的位置一般是在首页右上角，一点开网站就能看见，信息量并不多，但是对于访客说，可以直观快速的了解这个网站的站长信息。接下来咱们就花10分钟，用html标签+css写一个个人名片吧。

先看一下效果图：

预览地址→：https://www.tjcblog.com/card.html

从上图可以看出，这张个人名片的布局比较简单，姓名可以用H标签，其他信息可以用li或者P标签。唯一有难点的就是背景颜色有粉色，有蓝色的渐变，可以用css背景background属性来实现。接下来就一步步拆解制作名片。

步骤分析：

第一步，先写一个div，定义其宽为800px，高为460px的长方形，10px的圆角，背景色为粉色，并且将它居中显示。

第二步，用伪元素实现颜色渐变

css3属性颜色渐变属性有两种类型

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义