资源描述：
《关于CSS中圆角设计技术》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、关于css中圆角设计技术福源瀛职业中学文靓【摘要】CSS是一种设计网页样式的工具。借助CSS的强大功能，网页可以在丰富的想象力下变得更加赏心悦目。使用CSS可以方便地使用各种手段将页面灵活的分为多个部分，但是简单分割处理的都是矩形框。而在网页中，经常会需要圆角的设计，本文将对CSS中圆角的设计技术进行研究分析。【关键词】CSS网页样式设计圆角设计CSS是CascadingStyleSheets（层叠连样式表）的缩写，通常简称为样式表。和HTML-样，CSS也是一种标记语言，由W3C组织负责制定和发布。它不需要编译，可以直接由浏览器执行。我们可以通过简单的更改CSS文件来改变整个网
2、页的外观，它能够大大降低网页设计的工作量，是每一个网页设计人员的必修课。在网页设计中，经常会需要用到圆角的设计。在许多网页中都可以看到圆角框发挥了很重要的修饰和分隔作用，对于引导访问者的阅读起到了非常好的效果。圆角框的具体分类有很多，制作方法也多种多样。例如，可以根据对宽度的适应性分为固定的，流动的和弹性的圆角框；根据使用的背景图片个数，可以分为很多类型；根据使用的颜色情况，可以分为单背景色的还是带边框的。木文将详细分析固定宽度的圆角框制作，以及不固定宽度的圆角框制作方法。一、固定宽度的圆角框制作因为不必考虑宽度变化带来的麻烦，所以制作宽度固定的圆角框比制作适应宽度的圆角框要简单
3、很多。制作的关键在于如何合理地使用背景图像。1・两背景图像法使用这种方法只能制作单色的圆角框，而且必须还要确立两个颜色，一是圆角框的颜色，二是圆角框后面的网页背最色。然后根据这两个颜色来制作两个图像文件，如图1、图2所示：图1top.gif图2bottom.g讦实现的代码如下所示:
#rounded{font:12px/1.6arial;background:#cba276urlC'images/bottom.gif)no-repeatleftbottom;width:280px;padding:0018px;ma4、rgin:0auto;}#roundedh3{background:url(fimages/top.gif)no-repeat;padding:20px20px0;font-size:170%;color:#FFF;line-height:1;margin:0;}#roundedp{padding:lOpx20px0;color:#1B220F;margin:0;text-indent:2em;}
FixedRounded
vp>这是一个固定宽度的圆角框 5、html>2.带边框的固定宽度圆角框带边框的固定宽度圆角框也是在设计中经常遇到的问题。和上例比较，我们需要增加一个屮间的背景图像。因此需要准备三个背景图像，如图3、图4、图5所示。图3top-frame.gif图4middle-frame.gif图5bottom-frame.g讦实现的代码如下所示：
