CSS圓角進化論

時間 2019-11-09

標籤 css 圓角進化論欄目 CSS 简体版

原文原文鏈接

CSS圓角進化三個階段

背景圖片實現圓角css
CSS2.0+HTML標籤模擬圓角html
CSS3.0圓角屬性（border-radius屬性實現圓角）web

1、背景圖片實現圓角

實現方式：
瀏覽器

寬度固定，高度自適應url
設置兩個div，分別設置其背景圖爲寬度固定的圓角圖，且div寬度與圖片寬度一致。spa

//假設上圓角（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>

寬度和高度均自適應code

2、CSS2.0和HTML標籤實現圓角

利用div元素，一層一層疊加，每一層比上一層多一像素。htm

<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>

3、CSS3.0圓角屬性實現圓角

3.1 圓角屬性（border-radius）屬性簡介

屬性值：表示圓角半徑，可以使用長度單位px或百分比圖片
簡寫屬性：border-radiusit
份量屬性：border-top-left-radius（上左）、border-top-right-radius（上右）、border-bottom-left-radius（下左）、border-bottom-right-radius（下右）（注意top和bottom在前，left和right在後）