圆角边框

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

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

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

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

 

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

5.复制一个角

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

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

 

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

 

到此图片制作完成。

 

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

样式表部分

h1,body,p,div{ margin:0; padding:0;}/*清楚magin和padding*/
.rounded-box{ width:300px; margin:0 auto;} /*圆角外盒子，设置大小改变圆角矩形框*/
.cont-box{ border:1px solid #a3a3a3;}/*内容*/
.t-l,.t-l b,.b-l,.b-l b{background:url(images/bo2.png) -999em 0 no-repeat; font-size:0px;}/*四个角使用的背景图*/
.t-l,.b-l{ height:5px; position:relative; display:block; background-position:-5px 0;margin-bottom:-5px;}/*控制圆角位置*/
.t-l b,.b-l b{ float:right; width:5px; height:5px; display:block; background-position:0 0;}/*控制圆角位置*/
.b-l{margin-top:-5px;margin-bottom:0px; background-position:-5px -5px;}/*控制下面圆角*/
.b-l b{background-position:0 -5px;}/*控制背景图位置*/

.title1{background:url(images/title-bg.png); font-size:14px;color:#FFF; line-height:24px; text-align:center;}/*控制标题样式*/

 

html部分

<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”