第12课 圆角设计
本节课将就“圆角框”的各种各种情况进行深入的分析和介绍，大家要特别注意理解各种制作圆角框的方法的区别，以及他们的优缺点和适用范围。这一课是后面进一步深入学习网页布局的重要基础，希望读者能够特别给与重视。
务必把本章内容吃透，对后面的学习会有很大的帮助。而要把本章的内容吃透，一个很重要的前提就是把CSS的核心基础掌握扎实，这一点对于制作任何CSS设计都是最重要的。希望大家一定要仔细吃透核心原理，后面的应用无论看起来多么花哨，其实都是核心原理的应用而已。如果没有对核心原理真正掌握，只看到一些花哨的效果，而简单模仿，往往会事倍功半，而在理解核心原理的基础上，再分析复杂的案例，则会事半功倍。
本节课时长13分18秒，下载文件14.7兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
以下为本课的讲义，供大家参考。
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
[…] CSS高级样式设计 第10课 表格也精彩 第 11课 高级网页元素样式 第 12课 圆角设计 […]
不错~
来看看·
[…] CSS高级样式设计 第10课 表格也精彩 第 11课 高级网页元素样式 第 12课 圆角设计 […]
温老师你好!
我在学习”4图像滑动门”单色不固定圆角框上,书上287页写得为了不产生缺口可以把右上角和左下角的图像换为如图11.31所示的样子.这里实在有点不懂是不用img插入图片来缺口吗?能不能告诉我代码如何写.光盘上好像没有这个例子.
你好，我来的可能算比较晚的，看了css+div感觉很好，不过在下载一些大视频的时候每次下到中间就断掉了。。。请问有没有分流我可以不占用这里的带宽同时也能稳定下载。无论在哪里下的，我都会记住这里，已经收藏了哦
嘿嘿，我是自学div+css来制作网页的，听了温老师讲解的课程，确实提高了一些专业知识。希望以后能陆续提供一些更优秀完善且丰富的视频课程。谢谢温老师，辛苦了。O(∩_∩)O~
一年前的文章了，我今天才看到… 一年前就想学CSS/DIV了，只是当时很多东西比较模糊一头雾水就没继续了，今天一口气看了您的一系列视频，可以说是茅塞顿开啊，受益匪浅！感激ing…
对于这里提到的5图像二维滑动门方法来实现圆角，我还不太了解为什么是这样切分的，不知道书上是否有详细解释呢？ 而且看了下面的评论才知道，原来即使用这种方法，也是要图片的宽度大于内容的宽度的，内容有多宽，图片就要更宽吗？
我看您的网站页面里也有很多块结构是圆角的，也是用的这种方法吗？
woods，
谢谢您的鼓励！
书上有详细的介绍、步骤和代码，您可以参考。
是的，图片一定要宽于文字内容的宽度。不过这样的图片，一般颜色很少，即使做的面积很大，文件的体积也就几K而已，另外，整个网站也都是用同样的这几个小图片，所以还是会非常小的。
也就是说，在前面提到的为图像添加阴影效果里要制作的2个图，和这里实现圆角要做的图，都是尽量做很大以满足各种大小需求咯？我做了个800*800的半透明png，大小还好，不到5K。
另外，对您右侧的虚拟主机很敢兴趣，很怀念CPanel面板啊！我正好需要定位于欧美的PHP虚拟主机，不知道您是hostgator的空间代理商还是？可绑定域名3个有点少了哈，要能10个多好。
woods ，
原则是这样，具体情况还要具体分析。
我们使用的Hostgator的Reseller Plan，性能很好，Cpanel也非常好。
不过就是有流量限制5000M/月，不知道你够不够，域名你要那么多干啥？子域名可以放很多，主域名限制为3个。
为什么不 有些视频不能下载？
小李，
在播放一个视频的同时，不能下载或播放另一个。关闭了当前的视频，再下载另一个。
作者您好！
参照样章文档和这个视频用5图像法做了一下圆角盒的练习，最后发现左边圆角没有完全遮住左边的竖边框。我的图片是gif圆角处透明的，而且源码中包含第一幅图片的div是所有元素的容器，所以做圆角盒的图片在图片角上不应该用透明图片，若是有背景颜色的就不会出现这个问题了。不知道我的理解对不对。
美岛，
你说的对，这里介绍的方法，如果圆角处透明了，就会有问题。我们这个方法选择的是那个丹麦设计师的方法，是发表在A List Apart杂志的165期，它在写了这篇文章后，又写过一篇文章，发表在172期，专门解决这个问题，适用于透明圆角，这样做的目的主要是为了使页面的背景可以不是单一颜色，比如渐变或者图像背景。但是我们觉得太复杂了，书中就没有再继续深入。
如果您有兴趣，可以参考，他讲的非常详细，我实在没时间详细翻译了：
http://www.alistapart.com/articles/customcorners2/
另外，圆角的做法非常多，您可以根据实际需要，选择适合的方法。
感动！这么快就回复留言了！作者真是一位热情而又勤恳的人。要多像您学习！
我一上午都在站里转悠，这里的内容涉及很多方面，很多书看起来都不错。最近刚刚转行做前端，很有帮助，好期待我的书快点到货啊~~
原来我还发现了一些问题，会再去钻研一下，谢谢您！
美岛，
看得出你基础不错，一上来的问题就很到位了，我喜欢回答这种问题，呵呵。
有所同感。
不过国内像您这样讲的比较清楚系统内容又好的书真的不多，视频这样可以理解，期待书中的内容能更详尽些。（在卓越亚马逊订购了您的书等待收货中。。）
美岛，
没问题，我们的书的原则就是要保证真正把道理讲明白，这才是最核心的价值所在，当然不敢百分之百保证适合所有人学习，毕竟读者的背景千差万别，但是我们一直在努力寻找更好的方式把问题说清楚。
谢谢您的支持和留言，有问题欢迎来这里交流！
认真做好书！
我是一个喜欢买书来看的人，会省掉很多在google上乱翻，或看到不正确的例子走弯路的时间，更喜欢收藏好书，因为我觉得买书才是对自己所欣赏的作者的一种尊重，就像听音乐要买正版一样。
作者作书的态度让我尊敬，支持你！
美岛，
你说的太到点子上了，你如果到出版社作策划编辑，也会是一位好手，呵呵。
真夸张,真快,要想做更大,要想做更好,我觉得就不应当有所保留~
您却只给咱冰山一角看看….
路人甲,
谢谢您的建议。
老师 flv 格式视频用什么软件 录制的
录屏软件不少，各有特色，Adobe的Captivate、Techsmith的Camtasia都不错！
老师,这课我有一个疑问.如果分割成5张图片的话.按List Apart上面的做法,部分地方实际上跟固定宽度没区别啊?
比如就左上和右上的图片来说:如果整个页面的宽度变宽的话,右上角的图片只要在右上端就可以了,但是左上端的图片需水平循环才能有背景效果,但是如果水平循环的话左边图片的左圆角不就也一起循环了吗?那如果用滑动门技术,从左边图片的右边向左循环,那就得做很大(很高或很长)的图片才能满足有些宽页面的要求,比如有些特殊网页就是横着展示的.这样的话…….
以及左下的图片也是一样的道理?
那应该如何解决呢?
泥巴，
如你所说，这样做出来的圆角框的最大宽度受到图片宽度的限制，在这个限制以内，宽度可以任意调整。如果要做更宽的圆角框，就要把背景图像准备足够宽。
比如1000像素宽的一个圆角框通常已经足够了。对于绝大多数网站，不会出现太宽的圆角框。即使是横着展示的页面，一般也会分成很多列，而不会让一行文字非常宽，那样的话也不利于阅读。
而且你观察一下，横着网页极少见到，既不利于维护，也不利于阅读，所以除非是为了标新立异，一般网站不会用这种方式的。
谢谢老师的讲解.你说的这些让我确定了如何在这种情况下该怎么做了,呵呵,我以为有其他更好的办法,比如有没有什么代码让最后一个像素无限循环,呵呵!也许这样不太可能实现!
经常在你们网站上学东西,比如相关软件的CS3了解,挺不错!谢谢!
恩，
任何技术都不是无所不能的，我们尽可能挖掘出它的潜能来。掌握一个技术，也要知道他能做什么，不能做什么，怎么做，如何与其它技术配合，理解这个的过程，也就是不断进步的过程。
我晕，是不是你们书上的东西网上都有啊？
有疑问，
您好，您具体网上有什么？
与书中的内容配套的视频教程，我们放在网上，共大家供免费观看。这个主要目的是引导读者更好更快地学习，帮助读者理解书中的内容。
对于观看视频教程就可以完全掌握的读者，就不必买书了，如果还希望深入了解具体内容的读者，可以买书深入学习。因为大家基础不同，有的读者还是需要读书的，一点一点实践的。如果您的基础很好，看一看视频就都理解了，那也很好啊。
您有什么问题，可以深入交流！
=========
补充：是不是您买了书以后，来到我们的网站，发现视频教程在网上免费提供，感觉亏了？呵呵，您绝对不必这么想，等您仔细学完书里的所有内容之后，就会发现书里的奥妙了：）Please trust me！
此外，我们希望这个网站成为一个读者扩充学习的平台，这样买了一本书的读者，会在这里发现更多相关的内容，学习更多的技术，不是很好吗？
chance 老师你好，我看到你的留言了，这几天一直在研究书上的内容，感觉很好· ~ 还有，能不能再增加一些和xml的教程呢？还有cms使用方法··· 呵呵
有疑问，
谢谢你喜欢我们的书，这本书的内容相对来说不是非常基础的，有的案例不是一下子能想明白，我们在写的时候也动了很多脑子。
关于你说的xml和cms都是很热门的内容，我们会认真考虑，逐渐完善我们的内容，希望能收到您的进一步反馈意见！谢谢。