关于CSS中圆角设计技术.docxVIP

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