首页 > 代码库 > border-radius实例1

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

显示结果:

 

border-radius实例1