html5--6-44信纸设计
实例
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <link rel="stylesheet" type="text/css" href="style.css">
7 </head>
8
9 <body>
10 <div>
11 <br><br>
12 <p>本案例将使用多重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果</p>
13 </div>
14 </body>
15 </html>
1 @charset "utf-8";
2 /* CSS Document */
3 div{
4 width: 600px;
5 height: 800px;
6 padding: 40px;
7 font-size: 12px;
8 line-height: 25px;
9 border: 20px ridge rgba(200,60,30,0.6);
10
11 background-image: url(res/sc16.png),
12 url(res/sc17.png),url(res/sc5.png), url(res/sc18.png);
13 background-repeat: no-repeat,no-repeat,repeat,repeat;
14 background-size: 25%,25%,auto 100px,15%;
15 background-position: left top,right bottom,left top,left top;
16 background-clip: border-box,border-box,content-box,border-box;
17 background-origin: border-box,border-box,content-box,border-box;
18 }
19
20 p{
21 padding: 0;
22 margin: 0;
23 text-indent: 2em;
24 }
View Code