圆角之图片实现方法小结一

这几天一直在捣鼓图片实现圆角的方法。捣鼓了两天，累的脑都缺氧了。终于功夫不负有心人，在我不断的尝试和修改下终于完成了图片实现圆角效果。

好了，废话不多说，直接如题。

这里先总结下，图片实现圆角效果我分为两种：

一、上下两张图，中间自适应高度

实现原理：利用切割圆角图片为上下两张，中间利用border-left(right)：1px solid black，高度不写（高度自适应）。

具体步骤：1：建立三个top,content,bottom

2: 在top，bottom分别加入圆角背景图片。

3：在content，border-left(right)：1px solid black；

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下两张图片中间高度自适应实现圆角</title>
    <style>
    .container {
        width: 500px;             /*  设置图片的宽度500px*/
        margin: 0 auto;            /*    居中显示*/
    }
    .top {
        width: 500px;
        height: 100px;
        background: url(imgs/01.jpg) no-repeat;   /* 加载上面圆角图片*/
    }
    .content {                                
                                             /*中间文字内容框不设置高度自适应*/
        border-left: 1px solid black;         /*设置左右两边边框*/
        border-right: 1px solid black;          

    }
    .bottom {
        width: 500px;
        height: 100px;
       background: url(imgs/02.jpg) no-repeat;  
    }
    </style>
</head>
<body>
<div class="container">      <!-- 父类框 -->
    <div class="top"></div>  <!-- 上面圆角图片框 -->
    <div class="content">       <!--  中间文字内容框 -->
    中国龙，中国巨龙！
    中国龙，中国巨龙！
    中国龙，中国巨龙！
    中国龙，中国巨龙！
    中国龙，中国巨龙！
    </div>
    <div class="bottom"></div>   <!-- 下面圆角图片框 -->
    </div>
</body>
</html>

经IE6，7，8，Firefox,chrom测试全部显示正常。

效果图：

圆角之图片实现方法小结一

优点：图片少，代码简单，布局方便。

缺点：图片文件优点大，个人不推荐，不过初学者可用尝试。

二、上下左右四个角加入四张圆角图，高度自适应

实现原理：利用绝对定位来实现四张图片分别定位在四个角，然后在利用border:1px solid black;来实现其他边框及高度自适应。

注意：在用绝对定位的时候必须注意在父框四个角来定位，不是以流浪器左上角来定位，因此定位时要观察位移效果，

不然虽然加载了圆角图片但是边框黑色线覆盖不了（尼玛，这个知识点没有掌握好，我被坑了一个下午外加一个晚上）

绝对定位的时候left:-1px;top:-1px;等必须要多移动一个px才可以覆盖原来父框的边框线。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>四张圆角图片利用绝对定位实现圆角</title>
<!--     经IE7，IE8，Firefox，chrom,360浏览器等测试正常，IE6测试显示无效 -->
    <style>
      .container {
            width: 500px;
            margin: 0 auto;         /*居中显示*/
      }
      .content {
             border: 1px solid black;  /* 显示其余边框*/
             position: relative;      
             font-size: 15px;
             padding: 10px;

      }
      .l_top {
             width: 15px;
             height: 15px;
             background: url(l_top.gif) no-repeat;    /*  加载圆角图片*/
             position: absolute;
             left: -1px;         /* 注意绝对定位必须要加px，还有-1px。*/
             top: -1px;           /* 这个绝对定位是相对于最近父类框content的定位，不是相对于浏览器，因此必须要反向移动实现覆盖*/
      }     
      .r_top {
             width: 15px;
             height: 15px;
             background: url(r_top.gif) no-repeat;   /*原理同上*/
             position: absolute;
             right: -1px;
             top: -1px;
      }      
      .l_bottom {
             width: 15px;
             height: 15px;
             background: url(l_bottom.gif) no-repeat;
             position: absolute;
             left: -1px;
             bottom: -1px;
      }       
      .r_bottom {
             width: 15px;
             height: 15px;
             background: url(r_bottom.gif) no-repeat;
             position: absolute;
             right: -1px;
             bottom: -1px;
      }
    </style>
</head>
<body>
    <div class="container">
    <div class="content">
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        中国人，最强大脑！
        <div class="l_top"></div>
        <div class="r_top"></div>
        <div class="l_bottom"></div>
        <div class="r_bottom"></div>
            </div>
    </div>
</body>
</html>

经测试除IE6.0以外，其他浏览器均正常显示。

效果图：

圆角之图片实现方法小结一

优点：图片小，加载快。

缺点：代码较上面稍复杂。

其实这个方法还可以利用将四张图片加载在精灵图更加缩小图片。

圆角之图片实现方法小结一

相关推荐