传统的圆角生成方案，必须使用多张图片作为背景图案
CSS3圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：
      * 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。
　　* 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。
　　* 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况

border-radius
    用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。


默认值 : 0      不可继承

值：
       固定的px值定义圆形半径或椭圆的半长轴，半短轴。不能用负值
       使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值
       这是一个简写属性，用来设置
                         border-top-left-radius,
                         border-top-right-radius,
                         border-bottom-right-radius ，
                         border-bottom-left-radius
       半径的第一个语法取值可取1~4个值:
           border-radius: radius
           border-radius: top-left-and-bottom-right      top-right-and-bottom-left
           border-radius: top-left     top-right-and-bottom-left     bottom-right
           border-radius: top-left     top-right     bottom-right      bottom-left

       半径的第二个语法取值也可取1~4个值
           border-radius: (first radius values) / radius
           border-radius: (first radius values) / top-left-and-bottom-right      top-right-and-bottom-left
           border-radius: (first radius values) / top-left     top-right-and-bottom-left     bottom-right
           border-radius: (first radius values) / top-left     top-right     bottom-right       bottom-left

注意
    百分比值
       在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
       在 11.50 版本以前的 Opera 中实现有问题。
       Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴都相对于盒子模型的宽度。
       在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。

　　在开发移动端的时候最好用px而不是用百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background: pink;
            border-radius: 50%;/*相当于是使四个边角到盒子中心的距离为width、height的一半 只有正方形才能变成圆*/
        }
        .box2{
            width: 300px;
            height: 200px;
            background: yellow;
            border-radius: 10px 0px 20px 40px;/*控制四个方向的圆角 由左上角开始 以顺时针方向依次往后*/
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

posted on 2021-07-06 11:06 leiyanting 阅读(95) 评论(0) 收藏举报

刷新页面返回顶部

导航