边框border和边角radius

阅读量: 153 编辑

边框border和边角radius

一、代码案例

border:1px solid #ccc;     //边框
border-radius: 10px;        //圆角
border-radius: 50%;         //圆形

二、代码实战

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

文件:06.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>border</title>

        <style type="text/css">
            .mydiv{
                width: 100px;
                height: 100px;
                background-color: red;
                border:3px solid #000;
                border-radius: 50%;
            }

        </style>

    </head>
    
    <body>
        <div class="mydiv"></div>
    </body>
    
</html>