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

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

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

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

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

实现原理:利用切割圆角图片为上下两张,中间利用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测试全部显示正常。

效果图:

圆角之图片实现方法小结一_第1张图片

优点:图片少,代码简单,布局方便。

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

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

实现原理:利用绝对定位来实现四张图片分别定位在四个角,然后在利用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以外,其他浏览器均正常显示。

效果图:

圆角之图片实现方法小结一_第2张图片

优点:图片小,加载快。

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

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

你可能感兴趣的:(圆角之图片实现方法小结一)