利用css纯实现角矩形的方法综述

是的，你没有错，这是纯图片它不是纯代码实现，但画面的角落。你可能不以为然，但我想告诉你的是，甚至在未来CSS3圆角实现全浏览器兼容，但此刻的画面圆仍然是主流，丰富的画面效果（渐变、阴影、透明、圆润、浏览器兼容性、维护效率发展）是实现这些远不能与代码相比。所以这幅画的角落在实际战斗的重要性是有目共睹的，和掌握的图片角的技能奠定了日常的发展奠定了坚实的基础。以下是本分析的开始实现图片的每一个角落。你会发现原来的角落里的画面会那么丰富多彩。

一般演示就是这样的：
1。全浮式法
如果一个CSS初学者写的图片圆角效果，建议使用所有浮动的方法，简单易行，原理是左圆角悬空，主体是左浮动，右轮角右浮动，外包div铺背景图片。它是实现的图片圆角效果非常直观。缺点是之后，我们需要明确的花车，因为背景图片都平铺，左右必须离开或覆盖的背景吧，所以我们不能让角落的角落清。
HTML代码如下所示：

xml代码将内容复制到剪贴板。

全浮式法

CSS代码如下所示：

CSS代码将内容复制到剪贴板。
。floatmethod {宽度：350px；身高：32px；背景：URL（'roundbox_middle。gif）左上repeat-x；}
。floatmethod。中间{浮动：左；线高度：32px；padding: 0 00 10px；}
。floatmethod。左{浮动：左；宽度：6px；身高：32px；背景：URL（'roundbox_left。gif）左上没有重复；}
。floatmethod。错误：错误{浮动；宽度：8px；身高：32px；背景：URL（'roundbox_right。gif）左上没有重复；}

优点：操作简便，操作方便。
缺点：需要清除浮动，图片的角落不能透明。
分析原理：三个div浮动在一起，左右两个div放置角落，外包div使用背景扁平。
2。漂浮法
我认为浮毛都是升级版的流动规律，具有修复，不能在照片的角落是透明的缺陷，其原理类似于全浮动的方法，但现在左圆角是浮动的，右轮的角度是正确的，主体是直接放后面。主体采用边缘挤压使两个角明显低于背景空白的地方。
HTML代码如下所示：

xml代码将内容复制到剪贴板。
左右浮动法
CSS代码如下所示：

CSS代码将内容复制到剪贴板。
。newfloatmethod {宽度：350px；身高：32px；}
。newfloatmethod。中间{线高度：32px；保证金：0 8px 0 6px；padding: 0 00 10px；背景：URL（'images / roundbox_middle。gif）左上repeat-x；}
。newfloatmethod。左{浮动：左；宽度：6px；身高：32px；背景：URL（'images / roundbox_left。gif）左上没有重复；}
。newfloatmethod。错误：错误{浮动；宽度：8px；身高：32px；背景：URL（'images / roundbox_right。gif）左上没有重复；}

优点：简单，容易到手。
缺点：需要清除浮动。
原理分析：左圆角左飘，右圆右斜漂，主体在后面。
三.滑动门的方法
滑动门的方法是一种更巧妙的方法，使用嵌入式标签与外部标签为左上角，和嵌入式标签包含背景和右圆角。据掉特定方式的要求，这幅画是不同于漂浮法。缺点是CSS的掌握要求比较高，也有具体的要求，并应注意宽度，尽量使图片足以防止发生坠图片宽度不够。
HTML代码如下所示：

CSS代码将内容复制到剪贴板。
滑动门的方法
CSS代码如下所示：

CSS代码将内容复制到剪贴板。
。slidingdoormethod {宽度：350px；身高：32px；背景：URL（'images / roundbox_left。gif）左上没有重复；}
。slidingdoormethod。内{线高度：32px；保证金：0 00 0 00 6px；padding: 10px；背景：URL（'images / roundbox_slidingdoor_right。gif）放上没有重复；}

优点：代码精简，自由度大。
缺点：CSS，需要更高要求的滑动门。
原理分析：使用带有外部标签的内嵌标签作为左圆角，内嵌的标签包含背景和右圆角。
4。负利率的方法
负余量法是我最喜欢的方法之一，它简单合理，开发效率高。主要利用负边距技术使两个div重叠，挤出出两个圆角，达到画面的圆形效果。
HTML代码如下所示：

xml代码将内容复制到剪贴板。
负利率的方法
CSS代码如下所示：

CSS代码将内容复制到剪贴板。
。negativemarginmethod {宽度：350px；身高：32px；}
。negativemarginmethod .topLeft {身高：5px；_overflow：隐藏；背景：URL（'images / roundbox_negativemargin。gif）左上没有重复；}
。negativemarginmethod。topright {身高：5px；_overflow：隐藏；保证金：- 5px 00 5px；背景：URL（'images / roundbox_negativemargin。gif）放上没有重复；}
。negativemarginmethod。标题{线高度：28px；padding: 0 00 15px；背景：URL（'images / roundbox_middle。gif）左上repeat-x；}

优点：简单直接，开发效率高。
缺点：需要了解余量的负用法，具体的切削方式。
原理分析：主要采用负边距技术，使两个div重叠，挤出两个圆角，达到画面圆角效果。
5。负左余量法
这种负余量法是我自己考虑的。代码有点风骚。这只是一种新的思维方式。这似乎是一个小小的瑕疵的IE6，但它可以兼容，只要我们知道固定宽度。其主要原理是将三个div一起浮动，主体是放在前面，和两个圆角盖负左边缘对应的位置。
HTML代码如下所示：

xml代码将内容复制到剪贴板。

负左余量法
CSS代码如下所示：

CSS代码将内容复制到剪贴板。
。negativemarginleftmethod {宽度：350px；身高：32px；}
。negativemarginleftmethod。左{浮动：左；宽度：6px；身高：32px；保证金：0 00 100%；_margin：0 00 350px；背景：URL（'images / roundbox_left。gif）left'images / roundbox_left .webp；}。
。negativemarginleftmethod。放{浮动：左；宽度：8px；身高：32px；保证金：0 00 8px；背景：URL（'images / roundbox_right。gif）左上没有重复；}。
。negativemarginleftmethod。内{浮动：左；宽度：100%；线高度：32px；}
。negativemarginleftmethod。标题{ margin: 0 8px 0 6px；padding: 0 00 10px；背景：URL（'images / roundbox_middle。gif）左上repeat-x；}

优点：代码足够好。
缺点：代码稍臃肿，CSS的要求更高，和IE6需要知道具体宽度。
原理分析：主要采用负边距技术，使两个div重叠，挤出两个圆角，达到画面圆角效果。
以上五种实现方法，除了最不适合实际使用的方法外，前四种方法都能很好的兼容所有浏览器，考虑到一定的开发效率，滑动门和负边距的方法得到了个人的高度赞扬，当然，没有最好的方法。只有最合适的方法是根据你的需要选择合适的方法。那是最好的办法。我希望这篇文章能给你一些帮助和灵感。