首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

圆角框子

2012-10-06 
圆角边框圆角边框制作,方法有多种,自己觉得比较好的一种写下制作方式1.使用photoshops制作边框圆角为5px的

圆角边框

圆角边框制作,方法有多种,自己觉得比较好的一种写下制作方式

1.使用photoshops制作边框圆角为5px的圆角矩形

圆角框子

2.按ctrl+enter路径变为选取,

圆角框子

3.新建一个图层描边,选择菜单“编辑”-->“描边”1px,选择自己想要的颜色

圆角框子

?

4.使用矩形选取工具选取描边后的矩形“左下角”(选取框大小为5px)

5.复制一个角

6.通过复制的角再复制“水平翻转”变形,和“垂直翻转”制作以下图形

圆角框子

7.删除背景层,制作以下图效果(注意为了看到效果,本图放大处理)

圆角框子

?

8.按快捷键ctrl+alt+shift+s保存为“web”所需格式png-8(如下所式)

?

圆角框子

到此图片制作完成。

?

下一步就是div+css完成结构

样式表部分

<div class="rounded-box"><b class="t-l"><b></b></b><div class="cont-box">  <h1 class="title1">这是一个测试</h1>  <div>    <p>圆角内容 </p>    <p>&nbsp;</p>    <p>&nbsp;</p>    <p>&nbsp;</p>    <p>&nbsp;</p>  </div></div><b class="b-l"><b></b></b></div>

?

?完整代码 “圆角制作.rar”

?

?

?

热点排行