border-radius实例1

简单参数设置一

1.html

    <div class="paddingBig">
        <div class="divSmall radiusOne"></div>
        <div class="divSmall radiusTwo"></div>
        <div class="divSmall radiusThree"></div>
        <div class="divSmall radiusFourth"></div>

        <div class="clear"></div>
        <div class="blank"></div>

        <div class="divSmall radiusFive"></div>
        <div class="divSmall radiusSix"></div>
    </div>

2.css

        .divSmall {
            float: left;
            margin-right: 30px;
            border: 2px solid blue;
        }
        /*只取一个值,四角居右相同的圆角设置*/
        .radiusOne {
            border-radius: 10px;
        }
        /*设置两个值,先左上右下,再右上左下*/
        .radiusTwo {
            border-radius: 5px 30px;
        }
        /*设置三个值,先左上,再右下,再右上左下*/
        .radiusThree {
            border-radius: 5px 15px 30px;
        }
        /*设置四个值,先左上、再右上,再右下,再左下*/
        .radiusFourth {
            border-radius: 5px 15px 30px 50px;
        }

        /*反斜杠,设置一个值,四个角水平半径/垂直半径 */
        .radiusFive {
            border-radius: 10px / 40px;
        }
        /*反斜杠,设置两个值,先左上右下,再右上左下 水平半径/垂直半径*/
        .radiusSix {
            border-radius: 5px 20px / 40px 10px;
        }

显示结果:

 

相关设置二

1.html

    <div class="paddingBig">
        <div class="divSmall radiusOne"></div>
        <div class="divSmall radiusTwo"></div>
        <div class="divSmall radiusThree"></div>
        <div class="divSmall radiusFourth"></div>
        <div class="clear"></div>
    </div>
    <div class="blank"></div>
    <div class="paddingMiddle">
         <img src="../Images/3.jpg"  class="radiusSix"/>
        <img src="../Images/4.jpg" class="radiusSeven" />
    </div>

2.css

        .divSmall {
            float: left;
            margin-right: 30px;
            border: 2px solid blue;
        }

        img {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 30px;
        }

        .radiusOne {
            border-radius: 15px;
            border: 15px solid green;
        }
        /*border-radius的内径值是等于外径值减去边框厚度值*/
        .radiusTwo {
            border: 15px solid green;
            border-radius: 25px;
        }

        .radiusThree {
            border-color: red;
            border-style: solid;
            border-width: 10px 5px 20px 3px;
            border-radius: 30px;
        }

        .radiusFourth {
            border-style: solid;
            border-color: red green blue orange;
            border-width: 15px 30px 30px 80px;
            border-radius: 50px;
        }

        .radiusSix {
            border-radius: 5px 50px 5px;
        }

        .radiusSeven {
            border: 10px solid green;
            border-radius: 5px 5px 50px 5px;
        }

显示结果:

 

posted @ 2014-11-20 18:07  天马3798  阅读(289)  评论(0编辑  收藏  举报