渐变背景的个人名片
个人名片在个人博客网站上的位置一般是在首页右上角，一点开网站就能看见，信息量并不多，但是对于访客说，可以直观快速的了解这个网站的站长信息。接下来咱们就花10分钟，用html标签+css写一个个人名片吧。
先看一下效果图：
预览地址→：https://www.tjcblog.com/card.html
从上图可以看出，这张个人名片的布局比较简单，姓名可以用H标签，其他信息可以用li或者P标签。唯一有难点的就是背景颜色有粉色，有蓝色的渐变，可以用css背景background属性来实现。接下来就一步步拆解制作名片。
步骤分析：
第一步，先写一个div，定义其宽为800px，高为460px的长方形，10px的圆角，背景色为粉色，并且将它居中显示。
Html：
<div class="card_a"> </div>
css：
.card_a {
width: 800px;
height: 460px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -230px;
margin-left: -400px;
background: #efe6f1;
overflow: hidden;
border-radius: 10px;
}
如图：
第二步，用伪元素实现颜色渐变
css3属性颜色渐变属性有两种类型
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
一、CSS3线性渐变语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
例如设置背景颜色从上到下（默认方向）的颜色为粉色过渡到蓝色，写法如下：
background: linear-gradient(#f8a8b9, #8be9f6);
如图：
渐变方向默认是从上到下，那如果要改变方向呢，线性渐变可用top，left，right，bottom四个方向实现。例如：
background: linear-gradient(to bottom right, #000 , #fff);
如图：
也可以用角度来实现，例如：
background: linear-gradient(45deg, #f8a8b9, #8be9f6);/*逆时针旋转45度*/ background: linear-gradient(135deg, #f8a8b9, #8be9f6);/*同上图效果一样*/
注意：角度是按逆时针方向来计算，比如0deg，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
名片左下角的渐变就是用线性渐变来实现的，所以可以用一个伪元素：before来定义，然后颜色从蓝色过渡到粉色.这里中间色我用了透明来过渡，代码如下：
.card_a:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
border-radius: 100%;
background: linear-gradient(45deg, #8ed3e1 8%, transparent, #efe6f1);
bottom: -53px;
left: -87px;
}
如图：
二、CSS3径向渐变语法：
background: radial-gradient(shape size at position, start-color, ..., last-color);
例如设置背景颜色从内到外（默认方向）的颜色为粉色过渡到黄色再过渡到蓝色，写法如下：
background: radial-gradient(#f7b7b7, #f3db70,#80c6f4);
如图：
同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。
例如：
background: radial-gradient(circle,#f7b7b7, #f3db70,#80c6f4);
名片右边的渐变就是用径向渐变来实现的，所以可以用一个伪元素：after来定义，然后颜色从蓝色过渡到粉色.中间色我用透明来过渡，可以消除边界线，代码如下：
.card_a:after {
content: "";
position: absolute;
width: 700px;
height: 700px;
border-radius: 100%;
background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
top: -123px;
right: -352px;
}
如图：
第三步，完成文字部分
姓名用标签h2定义，字体大小为50px，文字间距用letter-spacing定义0.1em距离，span标签定义职位，可取消h2标签父类元素的字体大小以及粗细来重新定义。电话邮箱等基本信息，用li列表来实现。
Html：
<section>
<h2>杨青青<span>前端设计师</span> </h2>
<img src="wx.png" alt="">
<ul>
<li>电话 / 18649130945</li>
<li>邮箱 / 476847113@qq.com</li>
<li>地址 / 四川省·成都市</li>
<li>网址 / www.qingqingblog.com</li>
</ul>
</section>
CSS：
.card_a section {
width: 600px;
position: absolute;
left: 100px;
top: 80px;
z-index: 9;
}
.card_a section h2 {
font-size: 50px;
letter-spacing: .1em;
margin-bottom: 66px;
}
.card_a section span {
font-size: 28px;
font-weight: normal;
margin-left: 50px;
letter-spacing: normal;
}
.card_a img {
float: right;
width: 140px
}
.card_a section ul {
border-left: #222 3px solid;
padding-left: 28px;
}
.card_a section ul li {
list-style: none;
line-height: 38px;
font-size: 18px;
}
最后完整的Html以及CSS代码为：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>个人名片</title>
</head>
<body>
<div class="card_a">
<section>
<h2>杨青青<span>前端设计师</span> </h2>
<img src="wx.png" alt="">
<ul>
<li>电话 / 18649130945</li>
<li>邮箱 / 476847113@qq.com</li>
<li>地址 / 四川省·成都市</li>
<li>网址 / www.qingqingblog.com</li>
</ul>
</section>
</div>
<style>
* {
margin: 0;
padding: 0
}
.card_a {
width: 800px;
height: 460px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -230px;
margin-left: -400px;
background: #efe6f1;
overflow: hidden;
border-radius: 10px;
}
.card_a:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
border-radius: 100%;
background: linear-gradient(45deg, #8ed3e1 8%, transparent, #efe6f1);
bottom: -53px;
left: -87px;
}
.card_a:after {
content: "";
position: absolute;
width: 700px;
height: 700px;
border-radius: 100%;
background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
top: -123px;
right: -352px;
}
.card_a section {
width: 600px;
position: absolute;
left: 100px;
top: 80px;
z-index: 9;
}
.card_a section h2 {
font-size: 50px;
letter-spacing: .1em;
margin-bottom: 66px;
}
.card_a section span {
font-size: 28px;
font-weight: normal;
margin-left: 50px;
letter-spacing: normal;
}
.card_a img {
float: right;
width: 140px
}
.card_a section ul {
border-left: #222 3px solid;
padding-left: 28px;
}
.card_a section ul li {
list-style: none;
line-height: 38px;
font-size: 18px;
}
</style>
</body>
</html>
上一篇：用Html标签和CSS3写的一个手机！
下一篇：很抱歉没有了
你觉得文章内容怎么样