border-radius

　　伴随着CSS3的出现，对于传统的圆角生成，我们不在需要使用多张图片作为背景方案了，只需要使用border-raduis这个属性就可以了；取值说明：

<length>：
用长度值设置对象的圆角半径长度。不允许负值
<percentage>：
用百分比设置对象的圆角半径长度。不允许负值
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
  • 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
  • 如果只提供一个，将用于全部的于四个角。
  • 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
  • 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
  • 垂直半径也遵循以上4点。

关于兼容性：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
        }
        ul:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        li {
            width: 150px;
            height: 150px;
            float: left;
            list-style: none;
            margin: 10px;
            padding: 10px;
            background: #bbb;
        }

        .test .one {
            border-radius: 10px;
        }

        .test .two {
            border-radius: 10px 20px;
        }

        .test .three {
            border-radius: 10px 20px 30px;
        }

        .test .four {
            border-radius: 10px 20px 30px 40px;
        }

        .test2 .one {
            border-radius: 10px/5px;
        }

        .test2 .two {
            border-radius: 10px 20px/5px 10px;
        }

        .test2 .three {
            border-radius: 10px 20px 30px/5px 10px 15px;
        }

        .test2 .four {
            border-radius: 10px 20px 30px 40px/5px 10px 15px 20px;
        }
    </style>
</head>
<body>
<h2>水平与垂直半径相同时：</h2>
<ul class="test">
    <li class="one">提供1个参数<br />border-radius:10px;</li>
    <li class="two">提供2个参数<br />border-radius:10px 20px;</li>
    <li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
    <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时：</h2>
<ul class="test2">
    <li class="one">提供1个参数<br />border-radius:10px/5px;</li>
    <li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
    <li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
    <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>

 效果图：

  　　　　　　　　

 

 

当然，如果你仅仅只想给一个角设置这个属性，那也是可以的，对应四个角，CSS3提供四个单独的属性：

　　* border-top-left-radius
　　* border-top-right-radius
　　* border-bottom-right-radius
　　* border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
下面可以看一个有趣点的：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            position: relative;
            width:0;
            height:0;
            border:100px solid gray;
            border-radius:100px;
            border-right-color:transparent;
        }
        .small {
            border-radius: 20px;
            position: absolute;
            top: -68px;
            left: -15px;
            width: 20px;
            height: 20px;
            background: white;
        }
        .eye {
            position: absolute;
            top: -61px;
            left: -7px;
            width: 5px;
            height: 5px;
            border-radius: 5px;
            background: black;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="small"></div>
    <div class="eye"></div>
</div>
</body>
</html>

效果图：

　　　　

 

 

posted @ 2017-01-09 10:59  勤为径  阅读(349)  评论(0)    收藏  举报