| 订阅 | 在线投稿
分享
 
 
 

CSS创建圆角框

来源:互联网网民  宽屏版  评论
2008-11-25 07:16:41

我们接下来会创建一个xHTML页面,内含两个分别被ID为fixedBox与FlowBox的DIV所包含的两个内容区域,分别为固定宽度与不固定宽度的两个DIV,现在我们来为这两个DIV加上圆角。

我们所使用的理论是:在为元素添加背景时,背景图片总是显示在背景色之上;要创建单色的圆角矩形框,我们可以先创建一个正常的矩形框,然后,使用与背景色一致的圆角图片来做为这个元素的四圆角背景,就可以组成一个圆角框了。下面分两种情况—固定大小的框与流式不固定大小的框再详细说明方法。

为固定大小的框添加圆角

第一步:创建基本xHTML文档,并向其中添加少许内容

view plaincopy to clipboardprint?

<div id="fixedBox">

<h2>FixedBox Testing</h2>

<p>This is just a test page of enpor.com.</p>

</div>

<div id="fixedBox">

<h2>FixedBox Testing</h2>

<p>This is just a test page of enpor.com.</p>

</div>我们现在创建了一个xHTML文档,其中有一个ID为fixedBox的DIV,我们将这个DIV创建圆角边框。接着为此文档添加基本的样式化:

view plaincopy to clipboardprint?

body, html {

margin:0;

padding:0;

background:#a7a09a;

color:#000;

}

body, html {

margin:0;

padding:0;

background:#a7a09a;

color:#000;

}第二步:设置DIV的宽度大小与背景颜色

view plaincopy to clipboardprint?

div#fixedBox {

width:340px;

margin:40px;

background:#E4ECF9;

}

div#fixedBox {

width:340px;

margin:40px;

background:#E4ECF9;

}第三步:根据DIV的宽度来制作圆角矩形

由于我设置了DIV的宽度为340px,所以我现在需要制作一个宽度也为340px的圆角矩形,制作完成矩形之后,将整个矩形最上部与最下部裁切出来用作DIV的图片图,我制作了如下两张图片:

第四步:将图片应用于DIV背景之上

view plaincopy to clipboardprint?

div#fixedBox {

width:340px;

margin:40px;

background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center;

}

div#fixedBox {

width:340px;

margin:40px;

background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center;

}div#fixedBox h2{

margin:0;

padding:2px;

background:#E4ECF9 url(images/top.gif) no-repeat top center;

}

上面我们将名为Bottom.gif的图片应用在DIV的最下方,再把Top.gif用在DIV的第一个元素H2之上,当然,这里我们首先要注意的问题就是不能为h2添加Margin值或者为DIV添加Padding或者Border等。

创建非固定宽度的圆角框

上面我们说过的只是创建固定宽度不固定高度的圆角框,这样需要上下两张图片,那么,现在如果我们把宽度与高度都不固定了,稍微思考一下,就会发现,这一次我们会得使用4张图片才行,每一个角一张图片才能创建出可任何收缩的圆角矩形,我们还是先来创建一个DIV容器,加入基本内容。

第一步:创建xHTML文档

view plaincopy to clipboardprint?

<div id="flowBox">

<div class="forhelp">

<div class="forhelp2">

<h2>FlowBox Testing</h2>

<p>This is just a test page of enpor.com.</p>

</div>

</div>

</div>

<div id="flowBox">

<div class="forhelp">

<div class="forhelp2">

<h2>FlowBox Testing</h2>

<p>This is just a test page of enpor.com.</p>

</div>

</div>

</div>我是直接在上一个HTML文档中添加了如上四行,所以我不再需要为其Body设置CSS样式表,现在我们直接进入正题。

第二步,创建圆角

创建四个圆角,其圆角方向分别为左上、左下、右上、右下,我制作完成的圆角如下:

第三步:设置DIV的背景色

view plaincopy to clipboardprint?

div#flowBox {

margin:40px;

background:#C3D9FF;

}

div#flowBox {

margin:40px;

background:#C3D9FF;

}第五步:添加圆角

对于不固定宽度与高度的DIV容器来说,任何一个圆角都必须能根据DIV的宽度与高度的变化来改变自己的位置,所以我们只能把在固定宽度DIV里使用的固定宽度的图片处理成为两个小图片,并且以将可以直接在H2元素上添加,现在我们为H2元素添加之后,只得到一边的圆角,还差一个圆角将可以使用H2中的Span获得,这样就解决了两个圆角了,而p元素可以提供一个圆角,再div本身一个,刚好四个圆角。

view plaincopy to clipboardprint?

div#flowBox {

margin:40px;

background:#C3D9FF url(images/bottom-left.gif) no-repeat bottom left;

}

div#flowBox h2{

margin:0;

padding:0;

background:#C3D9FF url(images/top-left.gif) no-repeat top left;

}

div#flowBox h2 span{

margin:0;

display:block;

background:#C3D9FF url(images/top-right.gif) no-repeat top right;

}

div#flowBox p{

margin:0;

padding:0;

background:#C3D9FF url(images/bottom-right.gif) no-repeat bottom right;

}

 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
我们接下来会创建一个xHTML页面,内含两个分别被ID为fixedBox与FlowBox的DIV所包含的两个内容区域,分别为固定宽度与不固定宽度的两个DIV,现在我们来为这两个DIV加上圆角。 我们所使用的理论是:在为元素添加背景时,背景图片总是显示在背景色之上;要创建单色的圆角矩形框,我们可以先创建一个正常的矩形框,然后,使用与背景色一致的圆角图片来做为这个元素的四圆角背景,就可以组成一个圆角框了。下面分两种情况—固定大小的框与流式不固定大小的框再详细说明方法。 为固定大小的框添加圆角 第一步:创建基本xHTML文档,并向其中添加少许内容 view plaincopy to clipboardprint? <div id="fixedBox"> <h2>FixedBox Testing</h2> <p>This is just a test page of enpor.com.</p> </div> <div id="fixedBox"> <h2>FixedBox Testing</h2> <p>This is just a test page of enpor.com.</p> </div>我们现在创建了一个xHTML文档,其中有一个ID为fixedBox的DIV,我们将这个DIV创建圆角边框。接着为此文档添加基本的样式化: view plaincopy to clipboardprint? body, html { margin:0; padding:0; background:#a7a09a; color:#000; } body, html { margin:0; padding:0; background:#a7a09a; color:#000; }第二步:设置DIV的宽度大小与背景颜色 view plaincopy to clipboardprint? div#fixedBox { width:340px; margin:40px; background:#E4ECF9; } div#fixedBox { width:340px; margin:40px; background:#E4ECF9; }第三步:根据DIV的宽度来制作圆角矩形 由于我设置了DIV的宽度为340px,所以我现在需要制作一个宽度也为340px的圆角矩形,制作完成矩形之后,将整个矩形最上部与最下部裁切出来用作DIV的图片图,我制作了如下两张图片: 第四步:将图片应用于DIV背景之上 view plaincopy to clipboardprint? div#fixedBox { width:340px; margin:40px; background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center; } div#fixedBox { width:340px; margin:40px; background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center; }div#fixedBox h2{ margin:0; padding:2px; background:#E4ECF9 url(images/top.gif) no-repeat top center; } 上面我们将名为Bottom.gif的图片应用在DIV的最下方,再把Top.gif用在DIV的第一个元素H2之上,当然,这里我们首先要注意的问题就是不能为h2添加Margin值或者为DIV添加Padding或者Border等。 创建非固定宽度的圆角框 上面我们说过的只是创建固定宽度不固定高度的圆角框,这样需要上下两张图片,那么,现在如果我们把宽度与高度都不固定了,稍微思考一下,就会发现,这一次我们会得使用4张图片才行,每一个角一张图片才能创建出可任何收缩的圆角矩形,我们还是先来创建一个DIV容器,加入基本内容。 第一步:创建xHTML文档 view plaincopy to clipboardprint? <div id="flowBox"> <div class="forhelp"> <div class="forhelp2"> <h2>FlowBox Testing</h2> <p>This is just a test page of enpor.com.</p> </div> </div> </div> <div id="flowBox"> <div class="forhelp"> <div class="forhelp2"> <h2>FlowBox Testing</h2> <p>This is just a test page of enpor.com.</p> </div> </div> </div>我是直接在上一个HTML文档中添加了如上四行,所以我不再需要为其Body设置CSS样式表,现在我们直接进入正题。 第二步,创建圆角 创建四个圆角,其圆角方向分别为左上、左下、右上、右下,我制作完成的圆角如下: 第三步:设置DIV的背景色 view plaincopy to clipboardprint? div#flowBox { margin:40px; background:#C3D9FF; } div#flowBox { margin:40px; background:#C3D9FF; }第五步:添加圆角 对于不固定宽度与高度的DIV容器来说,任何一个圆角都必须能根据DIV的宽度与高度的变化来改变自己的位置,所以我们只能把在固定宽度DIV里使用的固定宽度的图片处理成为两个小图片,并且以将可以直接在H2元素上添加,现在我们为H2元素添加之后,只得到一边的圆角,还差一个圆角将可以使用H2中的Span获得,这样就解决了两个圆角了,而p元素可以提供一个圆角,再div本身一个,刚好四个圆角。 view plaincopy to clipboardprint? div#flowBox { margin:40px; background:#C3D9FF url(images/bottom-left.gif) no-repeat bottom left; } div#flowBox h2{ margin:0; padding:0; background:#C3D9FF url(images/top-left.gif) no-repeat top left; } div#flowBox h2 span{ margin:0; display:block; background:#C3D9FF url(images/top-right.gif) no-repeat top right; } div#flowBox p{ margin:0; padding:0; background:#C3D9FF url(images/bottom-right.gif) no-repeat bottom right; }
󰈣󰈤
 
 
 
>>返回首页<<
 
 热帖排行
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有