网页圆角框的制作

人们总是对流线型充满好感，在asp中也不例外，相信很多人对圆角框并不陌生，比如很多网页图片都不是方方楞楞的，其实那些圆滑的图案就是一种圆角框制作技术，那么在网页asp.net中怎么制作圆角框呢？ 这里总结牛腩中的两种作图法——一般的作图和五点作图法。

这两种作图方法的共性：

1.都需要用到一点PS的技术，就是用PS切出需要的图片元素来。

2.用到的CSS样式设计思路是一样的。

两种作图方法的差异：

1.主要的是整体圆角框的构成不同。一般作图分成三部分：上、中、下；五点作图把目标图片分为五个小的部分。

 2.五点作图法制作的是可自动适应宽度的圆角框。

下面演示一下具体的做法，先说一般的作图方法。

    1、素材的选取：

    找一个喜欢的网页，当然里面要包含圆角图片，这里就用牛腩里的例子做演示。

    打开智囊团首页：http://www.zhinangtuan.net.cn/login.jtml 然后点击浏览器的文件->保存网页，然后将网页复制到vs中，预览，删除多余的部分，然后贴着图片的边缘用截图工具截下来，保存为jpg格式。

    2、素材加工：

用PS打开截下的图片，然后分别切出上、中、下三部分来，并保存为Web使用格式，将切好的图片复制到vs的Image文件下。（中间部分只切一个像素的宽度即可）

 

    3、样式设计：

设计的基本思路是：将各部分的图片作为asp界面区域背景图片进行样式设计，用到了在CSS中加载图片的方法，以及一些对图片的样式设计属性：background-image（加载背景图片）、background-position:top ;（图片位置）、background-repeat :no-repeat ;（是否重复加载）、padding  :20px 30px;（内边距）

详细代码如下： 

.round1 h3                      /*圆角框的头*/
{
    background-image :url("../image/round_top.gif");
    background-position:top  ;
    background-repeat :no-repeat ;
    padding  :20px 30px;
    
    } 
    
 .round1                          /*圆角框的中间*/
{ 
                                                    /*图片作为背景*/
    /* background-image :url("../image/round1.jpg");   /*当前目录的上级目录image下的round1.jpg */
    width :518px; 
      
    background-image :url("../image/round_middle.gif");
    background-position:center  ;
    background-repeat :repeat-y ;
    
    margin:auto ;
     
    margin-top :160px;
    
    }   
.round1 #footer                 /*圆角框的底*/
{
    background-image :url("../image/round_bottom.gif");
    background-position :bottom ;
    background-repeat :no-repeat ;
    padding :20px ;
    padding-left:300px;   
    
    } 
    

到此为止，一个最简单的圆角框就制作好了，剩下的工作就是根据你的界面灵活运用CSS+DIV样式设计你的窗口了。 

 

一般的作图方法是不能自动适应宽度的，如果我们的内容宽度是随时可变的，那怎么办呢？所以五点作图就应运而生了。

五点作图与一般的作图方法所用的技术是一样的，差别在于实现的设计思路不同：五点作图把图片分的更细，整体上可分为左右两大部分，左边部分是固定，右边部分随着宽度自动适应。

先看看一下五点是哪五点？如下图：

这里提一下：各个部分的大小是不一样的，左上部分最大，右中只是一个像素，其他的做法跟一般的作图方法是一样的，这里就不再赘述，仅举一个设计右上角的样式为例。

.round2 .con /*右上角中间部分背景图片*/
{
    /* background :url("../image/round2_right_middle.gif") repeat top right;*/
    background-image: url("../image/round2_right_middle.gif");
    background-position: top right;
    background-repeat: repeat-y;
    margin-top: -1em; /*解决IE的空隙问题*/
    padding: 20px;
}

 那么，五点作图的宽度是不是可以随意变化呢？答案是否定的。五点作图的宽度是有界限的，内容的最大的宽度不能超过原始图片的最大宽度，否则这五点之间就会出现脱节，在左边部分与右边部分出现白边。