CSS圆角进化论

CSS圆角进化三个阶段

  1. 背景图片实现圆角

  2. CSS2.0+HTML标签模拟圆角

  3. CSS3.0圆角属性(border-radius属性实现圆角)

一、背景图片实现圆角

实现方式:

  • 宽度固定,高度自适应

    设置两个div,分别设置其背景图为宽度固定的圆角图,且div宽度与图片宽度一致。

//假设上圆角(top_800.gif)与下圆角背景图片(bottom_800.gif)为800px
<style type="text/css">
    .top {
        background:url("top_gif") 0 0 no-repeat;
        width:800px;
    }
    .bottom {
        background:url("bottom_gif") 0 0 no-repeat;
        width:800px;
    }
</style>
<body>
    <div id="container">
        <div id="top"></div>
        <div id="bottom"></div>
        <div id="bottom"></div>
    </div>  
</body>
  • 宽度和高度均自适应


CSS圆角进化论_第1张图片

二、CSS2.0和HTML标签实现圆角

利用div元素,一层一层叠加,每一层比上一层多一像素。

<style type="text/css">
    #radius_1 {
        margin:0 2px;
        height:1px;
    }
    #radius_2 {
        margin:0 1px;
        height:1px;
    }
</style>
<div id="container">
    <div id="radius_1"></div>    //制作圆角
    <div id="radius_2"></div>
    <div id="contetn">内容</div>
    <div id="radius_2"></div>    //制作圆角
    <div id="radius_1"></div>
</div>

三、CSS3.0圆角属性实现圆角

3.1 圆角属性(border-radius)属性简介

  • 属性值:表示圆角半径,可使用长度单位px或百分比

  • 简写属性:border-radius

  • 分量属性:border-top-left-radius(上左)、border-top-right-radius(上右)、border-bottom-left-radius(下左)、border-bottom-right-radius(下右)(注意top和bottom在前,left和right在后)

3.2 简写属性的值设置

  • 1个属性值:4个角半径相同

  • 2个属性值:分别为上左和下右、上右和下左

  • 3个属性值:分别代表上左、上右和下左、下右

  • 4个属性值:分别代表上左、上右、下右、下左

3.3 浏览器私有前缀

解决各浏览器显示差异,针对浏览器写私有前缀:

  • IE内核:-ms-

  • FireFox内核:-moz-

  • 谷歌浏览器、Safari内核:-webkit-


你可能感兴趣的:(CSS圆角进化论)