css3实现折叠效果
在本教程中，我们将学习使用CSS3功能（例如背景渐变和框阴影）创建灵活的（响应式）折叠纸效果，该功能可以为网站的内容区域提供漂亮的背景。
步骤1：设置<head>
让我们从制作一个非常基本HTML页面开始。 我们将使用HTML5，因为..为什么不呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Flexible Folded Paper Effect</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>首先，我们确保使用HTML5文档类型，设置标题，在样式表中调用，还使用viewport meta标签，这样我们的效果将在移动设备和平板电脑设备上响应。 最后，有一个polyfill可以在较旧的浏览器中识别html5元素，并且还有一个针对IECSS3渐变的修复程序，我们稍后将在本教程中使用它。
步骤2：设置<body>
<body>
<div id="page-wrap">
<div class="paper">
<section>
<h1>Flexible Folded Paper Effect</h1>
<hr /><h2>Achieved with a mixture of CSS3 gradients and box-shadows.</h2>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla. Praesent lectus lacus, tristique at dictum ac, porta at magna. Phasellus est nunc, pulvinar non tempor a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.<br/><br/>Aliquam au
最低0.47元/天 解锁文章
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
