石家庄邮电职业技术学院专属活动第2期：【校园前端学习笔记】主题征文石家庄邮电职业技术学院社区
学号后四位：（必填）0203
邀请人ID：（非必填）
学有所思、学有所获、学有所得。在生活中，许愿墙是一种承载愿望的实体，来源于“许愿树”的习俗。后来人们逐渐改变观念，开始将愿望写在小纸片上，然后贴在墙上，这就是许愿墙。随着互联网的发展，人们又将许愿墙搬到了网络上，通过网站上的一个空间页面，来发表和展示愿望。
项目实现效果
知识点
本项目是由<div>、<p>和<spen>等标签构成的，并使用圆角边框、背景颜色渐变来实现页面的效果。
项目代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>许愿墙</title>
<link rel="stylesheet" herf="css/style.css">
</head>
<body>
<div class="container">
<div class="item" style="background:#E3E197">
<p>这是第一个便签</p>
<span>关闭</span>
</div>
<div class="item" style="background: #F8B3D0;">
<p>这是第二个便签</p>
<span>关闭</span>
</div>
<div class="item" style="background: #BBE1F1;">
<p>这是第三个便签</p>
<span>关闭</span>
</div>
</div>
</body>
</html>编写许愿墙页面css样式
*{
margin: 0;
padding: 0;
}
.container{
width: 1160px;
height: 440px;
background-image: linear-gradient(#B6E8DB,#15B0C9);
padding: 200px 153px 200px 150px;
}
.item{
width: 300px;
height: 350px;
float: left;
margin: 0 20px;
padding: 20px;
box-shadow: 0 2px 10px 1px #7F7F7F;
border-bottom-left-radius: 20px 500px;
border-bottom-right-radius: 500px 30px;
border-top-right-radius: 5px 100px;
}
p{
margin: 50px 30px;
}
span{
color: white;
position: relative;
left: 220px;
top: 120px;
font-size: 14px;
}
笔记整理
在css3以前，如果要制作圆角边框效果，需要在元素标签中加上4个空标签，再在每个空标签中应用一个圆角的背景，然后对这几个应用了圆角的标签进行相应的定位，这个过程十分麻烦。而css3中新增了boder-radius属性，现在我们用它来实现圆角边框效果就十分简单了！
