边框圆角效果的原理

边框圆角效果的原理

圆角语法格式：

border-radius: none | length;

none:默认值，无圆角。

length:由长度和单位组成，不可为负值。若length只有一个参数值，那么圆角的水平半径与垂直半径都为这个参数值。若length有两个参数值，那么第一个参数值表示圆角的水平半径，第二个参数值表示圆角的垂直半径。

例如：

CSS程序

    .p1{
        text-align: center;
        border: 15px solid #000000;
        width: 200px;
        height: 100px;
        border-radius: 8px;
    }
    .p2{
        text-align: center;
        border: 15px solid #000000;
        width: 200px;
        height: 100px;
        border-radius: 50px/10px;
    }

HTML程序

    <p class="p1">
        我只有一个参数值
    </p>
    <p class="p2">
        我有两个参数值
    </p>

效果如图1所示

图1

圆角效果的原理：

虽然会设置圆角了，但是圆角的那个参数值究竟代表什么呢？接下来用举例说明。

我们先定义一块400px*200px的区域，如图2。

图2

css代码

    .p1{
        text-align: center;
        border: 10px solid #000000;
        width: 400px;
        height: 200px;
        background-color: #009900;
        border-radius: 50px/75px;
    }

若将圆角的水平半径设置为50px，垂直半径设置为75px，那么原理如图3。

图3

程序执行后的效果如图4。

图4

以上就是圆角效果的原理了，如有不足，欢迎批评指正！