border-raduis 圆角边框-一一网

1. pt 单位

pt 点（Points），绝对长度单位。
印刷业上常使用的单位，磅的意思，一般用于页面打印排版。
1in=2.54cm=25.4 mm=101.6q=72pt=6pc=96px

关于圆角的形成：

从指定教的顶端，向内部引出垂直半径和水平半径
将水平半径和垂直半径相较于元素内部的一点（圆心点）
以该点为圆心，指定的垂直半径和水平半径画圆或椭圆
与边框相交的部分就是圆角部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo {
            /* border-top-left-radius: 55pt 25pt;
            border-top-right-radius: 55pt 25pt;
            border-bottom-right-radius: 55pt 25pt;
            border-bottom-left-radius: 55pt 25pt; */
            /* 等同于 */
            border-radius: 55pt/25pt;


            border: 5px solid blue;
            width: 500px;
            height: 500px;
            background-color: #f00;
        }

        #one {
            border-radius: 10px 20px 30px 40px;
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 2px solid green;
        }

        #tow {
            border-radius: 10pt 20pt 30pt 40pt;
            /* 错误写法： */
            /* border-radius: 10pt/20pt  20pt/30pt  30pt/40pt 40pt/50pt ; */
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 2px solid green;
        }

        #three {
            border-radius: 10px 50px 30px;
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 2px solid green;
        }

        #four {
            /* border-radius:  50px 30px; */

            /* 下面这两种四个角都一样 */
            /* /是分隔号 */
            /* border-radius:  10pt / 40pt 50pt ;   */

            /* 相当于  */
            /* border-radius:  10pt / 40pt ;  */
            /* pt最后一个失效 */



            /* border-radius:  10px   / 10px  50px;  */
            /* 相当于： */
            /* border-radius:  10px   / 10px  50px;  */
            /* border-radius:  10px  10px / 10px  50px;  */

            /* 如第 2 个参数值省略未定义，则直接复制第 1 个参数值。 */
            /* border-radius: 10px 20px  ; */
            /* 相当于 */
            /* border-radius: 10px 20px  / 10 px 20px; */

            /* 对角 */
            /* border-radius:  10px  20px   /   2px  50px ;  */


            /* border-radius: 10px 20px 30px / 10px 50px ; */
            /* 相当于 */
            /* border-radius: 10px 20px 30px 20px / 10px 50px  10px  50px ; */
            /* 10px 50px  左上右下对角的垂直都是10  */

            /* 第一了三个最后一个没有定义 那个最后一个就取对角的值 */

            /* border-radius: 50px / 10px 60px; */
            /* 没有第二个 就取它对应位置垂直的值 */
            border-radius: 50px 60px/ 10px 60px;

            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 2px solid green;
        }

        #five {

            /* 72pt = = 96px */
            /* width: 96px; */
            /* height: 96px; */
            width: 72pt;
            height: 72pt;
            background-color: red;


            

        }
    </style>
</head>

<body>

    <div class="demo">
        <!-- border-radius属性提供 2 个参数，参数间以/分隔，每个参数允许设置 1~4 个参数值，第 1 个参数表示水平半径或半轴，第 2 个参数表示垂直半径或半轴，如第 2 个参数值省略未定义，则直接复制第 1 个参数值。 -->
        <!-- 四个参数值 -->
        <!-- 上右下左 -->
        <!-- 三个值 -->
        <!-- 上左 对称（top-right和bottom-left） 下游 -->

        <!-- 两个 -->
        <!-- 对称 （top-left和bottom-right） -->
        <!-- 只提供一个，将用于全部的四个角 -->

    </div>

    <div id="one"></div>
    <div id="tow"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
    <!-- pt单位名称为点（Point），绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。 -->

</body>

</html>
复制代码

案例：

<!-- 案例 -->
    <div style=" background-color: blue; 
    width: 100px; 
    height: 200px;
    border:2px solid teal;
    
     border-left: 100px solid yellow;
     border-radius: 100px;"></div>
</body>
复制代码