11.1 圆角框的作用


在网页设计中，通常需要把网页分为若干个部分，这正是CSS的强项。使用CSS可以方便地使用各种手段把页面灵活地分为多个部分。但是简单分割出来的都是矩形方枢，设置背景颜色和边框的颜色，产生的都只能是矩形的方框。而在网页中，经常会需要用到圆角的设计。因此，为了使页面中可以灵活地使用圃角框，有很多专家都研究出了非常好的方法，本章就来专门对圆角的设计进行介绍。

http://homepages.ulb.ac.be/~cschrett/zengarden/dayandnight/所示的是一个非常常见的布局形式，上面是页面的头部(header)，下面是页脚(footer)，页面分为两列。这种部局非常适合内容不是很多的网站。

再如Adobe网页中的圆角效果http://www.adobe.com/cn/，这是著名的Adobe公司的首页。这样内容非常多的网站，其结构也会相应复杂。

从上面的例子中，都可以看到圆角框发挥了很重要的修饰和分隔作用，对引导访问者的阅读起到了非常好的效果。

圆角框的具体分类也很多，制作方法也很多。例如，可以根据对宽度的适应性分为固定的、流动的和弹性的圆角框；根据使用的背景图片个数，又可以分为很多类型；根据使用的颜色情况，可以分为单背景色的还是带有边框的。

下面我们就从最简单的方法开始讲起。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表
编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/887.html

11.1 圆角框的作用

时间： 2024-10-13 11:53:02

11.1 圆角框的作用的相关文章

11.2 固定宽度圆角框

因为不必考虑宽度变化带来的麻烦,所以制作宽度固定的圆角框比制作适应宽度的圆角框要简单很多.关键在于如何合理地使用背景图像. 一.两背景图像法 本例制作如图1所示的圆角框,使用两个背景图像文件,宽度固定.这种方法只适用于制作单色圆角框.本实例文件位于网页学习网CSS教程资源中“第11章\01\basic.htm”. 图1 圆角框案例效果 ① 使用这种方法首先要确定圆角框的颜色,以及圆角框后面的网页背景的颜色,然后根据这两种颜色制作两个图像文件,如图2所示.例如,这里的网页背景为白色,圆角框为咖啡色

11.4 “5图形”二维滑动门经典圆角框

11.3节介绍的不固定宽度的圆角框制作方法只适用于单色的圆角框,对于带有复杂边框的圆角框就不适用了. 另外,还需要考虑一个问题,用11.3节介绍的方法制作的圆角框,尽管可以适应不同宽度,但是它里面的正文段落也承担了设置圆角框布局的任务.也就是说,圆角框中的正文并不是独立的,正文内容不能自由地设置样式.这对于通用型的网页来说,局限性很大:例如,如果较为复杂的页面,每个圆角框用于放置不同的栏目,希望达到的目标应该是可以在每个圆角框中放置任何内容,并且可以对这些内容设置样式,还能保证圆角框本身显示正确

圆角框 投影 不透明度

圆角框 固定宽度的圆角框 两个图像:一个用于框的顶部,一个在底部. <div class="box"> <h2>Lorem Ipsum</h2> <p></p> </div> .box { width: 418px; background: #effce7 url(img/bottom.gif) no-repeat left bottom; } .box h2 { background: url(img/top.g

第4章 背景图像效果之圆角框

一 圆角框 1 固定宽度的圆角框 <style> .box{ width: 418px; background: #effce7 url(img/bottom.gif) no-repeat left bottom;} .box h2{ background: url(img/top.gif) no-repeat left top; padding: 20px 20px 0px 20px ;} .box p{ padding: 0 20px 20px 20px;} </style>

CSS3圆角框、阴影兼容IE JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--[if IE]> <script type

圆角框吧应该

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> div{ text-align:center;/*把文字放在中央*/ width:200px;/*设置宽度*/ border:2px solid;/*边框的宽度*/ border-radius:30px;/*圆角的大小*/ background:#CCC;

css3简单的圆角框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

带箭头的圆角框

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>韬睿科技</title> 6 <style> 7 .div1{ 8 width: 375px; 9 height: 230px; 10 border: 1px solid red; 11 padding:15px; 12 border-radius:8px; 13

固定宽度的圆角框

1 .box{ width:418px; background:#effce7 url(/img/bottom.gif) no-repeat left bottom; padding-bottom:1px;}.box h2{ background:url(/img/top.gif) no-repeat left top; margin-top:0; padding:20px 20px 0 20px;}.box p{ padding:0 20px;} <div class="box"