欢迎您阅读本文，今天小编为你分享的电脑教程是：【网页圆角样式中使用背景图的方法】，下面是详细的讲解！
网页圆角样式中使用背景图的方法
网页的圆角处理，其实最开始的九宫格的表格处理是挺方便的，只是现在都不用表格布局了，自然就被非法取缔了。呵呵。
微软的有VML画圆角，由于只是它自家的特产，大家也都不用了，再有就是Javascript的处理方法，很多都会影响页面性能，大家也都不爱用了。
剩下来的，就只能是老老实实地用背景图了。常用的方法有：
1、固定高度的情况下，我们通常把背景图的宽度拉到足够大，做一个大图，如下：
2、同样，固定宽度的话，我们就拉长高度，如下：
原理都是一样的，就是2头拼凑到一块形成整体。第二种方法会因为在实际使用中图片可能会拉太长，我们一般会将它分为3块来实现，即头部、中间(1px背景垂直拉伸)、和底边。
3、以上是一般网站局部使用圆角的常见处理方法，但如果是整站的UI都很圆的话，显然上面2个常见的方法就不是很好用了，到处都是圆角，高度宽度都随意变换的情况下。我们有必要来一个兼容性更好的背景图法了。这也必然把我们带到了最开始的“九宫格”模式中去了。
同样是基于这种“九宫格”处理的思想，在代码实现上各个网站也有各自的招。
1、头、尾各用3个标签(div or span)来实现圆角，中间直接用border-left、border-right属性来补2边。
2、用一个很大很大的圆角图片，然后来个若干层div嵌套实现，道理和最上面说的拉长高度和拉长宽度是一样的，它这个是双向无限拉长，比如Facebooke的这个圆角处理的背景图片是2000*16像素的尺寸。更大的我看到就是饭否的这张1000*1000像素的了。请看例子。
3、图太大了，总难免是有点舍不得用的，那就用小图，看淘宝网首页的，实现圆角的图片圆角就是这样的。它的原理是在标准的边框实现之后，再额外地向4个角加上一张小图片去补圆，它这个做法，除了图片是小的之外，在网页加载背景图之前，也是有一个比较好的视觉呈现的。示意图如下：
关于网页圆角样式中使用背景图的方法的用户互动如下：
相关问题：DIV+CSS如何通过圆角背景图片实现网页中插入的其他...
答：教你个最简单的方法好了，你再做一个镂空的图片，镂空部分就是圆角图片显示的区域就行了 其中你把bg01设为你想插入的图片，bg02设为镂空图片，这样的遮罩效果就行了，非常简单 >>详细
相关问题：photoshop 怎么切圆角图不带有白边？我切出来的圆...
答：存储时选择 存储为web所用格式 里面选择存储gif 就可以保存透明圆角网页图片了 >>详细
相关问题：网页实现圆角边框栏目的代码（背景图片为一张大图...
答：这个好像不能实现吧，DIV+CSS只能实现方方正正的，可能用JS可以实现； 要不就 背景图片是个圆角的 加上样式 background-repeat:repeat-y;不让他纵向重复 >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-