首页 > 其他分享> > 前端|CSS信封的制作方法

前端|CSS信封的制作方法

2021-06-30 13:52:22 作者：互联网

1.边框的设计

利用Hbuilder来制作一个信封，此处使用的是先制作信封边框再进行文字加入的方法来设计。

观察常用的普通信封，不难看出需要在css中设计的边框就只有两个（一个是信封总的一个大边框，而另一个则为贴邮票处的小框）。从大框开始着手，先是在界面中引入边框代码如下：

.box1 {

margin: 100px auto;

width: 480px;

height: 300px;

padding: 10px;

border: 5px solid beige;

font-size: 30px;

border-style: solid; background: darkgoldenrod;

}

这样就能够大概设计出一个信封比例的原型（包括背景色）。之后再进行小边框的设计，与大边框类似

.box2 {

margin: 0px auto;

width: 60px;

height: 60px;

padding: 10px;

border: 3px solid black;

font-size: 30px;

border-style: solid; background: darkgoldenrod;

float: right;（**）

}

与大边框的代码使用大同小异，只是在此处为了能使得小边框镶入大边框中加入了浮动（float）的使用。

2.文字的加入

文字的加入相对较为简单，具体使用代码如下

<div>

61500

<div>

贴邮票处

</div>

<u>

<p style="font-size: 20px; margin-left: 30px;">四川省成都市龙泉驿区459号</p>

<p style="font-size: 20px; margin-left: 50px;">四川省凉山州西昌市*********</p>

</u>

</div>

由代码可看出，可先设计出除小边框以外的文字，控制字的大小、边距来使得输入的内容达到信封的效果。具体代码截图及设计成品如下

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图2.1 关键代码截图

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图2.2 成果展示

在本次设计使用中，首先应特别注意的是浮动（float）再小边框设计中的使用，没有浮动的使用无法无法达到理想的设计效果。除此之外，文字在这里的使用也应特别注意文字输入后的大小及位置，每一个文字都影响着信封样式的还原。

END

主编 | 张祯悦

责编 | 陈宇杰

where2go 团队

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

标签：信封,文字,solid,边框,制作方法,设计,border,CSS
来源： https://blog.51cto.com/u_15281984/2957735