边框和边角

阅读量: 264 编辑

边框和边角

边框用border属性

border:1px solid red; 1个像素红色实线

边角用raduis属性

border-radius: 10px; 边角是10个像素的弧度
border-radius: 50%; 边角是50%弧度，也就是原型
border-radius 四个角分别设置
- border-radius: 10px 20px 30px 40px; 顺序是上左、上右、下右、下左
- border-radius: 10px 20px; 上下是10px ，左右是20px

二、代码实战

代码的详细解读，可以参考视频教程。

新建 html 文件 09-border.html ，编写下方程序，运行看看效果吧

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>边框和边角</title>

        <style type="text/css">
            .my-div{
                width: 200px;
                height: 200px;
                background-color: #cccccc;

                border: 2px solid red;
                /**border-radius: 30px;**/
                /**border-radius: 50%;**/

                /**
                border-top: 2px solid red;
                border-right: 2px solid red;**/

                border-radius: 10px 20px;

                /**
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;**/
            }
        </style>
    </head>
    
    <body>

        <div class="my-div"></div>
    
    </body>
    
</html>