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在后）

3.2 简写属性的值设置

1个属性值：4个角半径相同
2个属性值：分别为上左和下右、上右和下左
3个属性值：分别表明上左、上右和下左、下右
4个属性值：分别表明上左、上右、下右、下左

3.3 浏览器私有前缀

解决各浏览器显示差别，针对浏览器写私有前缀：

IE内核：-ms-
FireFox内核：-moz-
谷歌浏览器、Safari内核：-webkit-

1. CSS画圆角
2. css 圆角
3. css实现内凹圆角，利用圆角反向进行（转）
4. CSS圆角框，圆角提示框
5. CSS圆角效果
6. 纯CSS圆角框
7. 圆角优化
8. CSS圆角实现详解
9. CSS圆角样式详解
10. CSS border-radius边框圆角
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用Rxjava计算圆周率
• IntelliJ IDEA代码格式化设置