微信扫一扫打赏支持

html5--6-44信纸设计

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

 

posted @ 2017-12-10 15:14  范仁义  阅读(1243)  评论(1)  编辑  收藏  举报