css样式怎么把按钮变圆(2)-木庄网络博客

当前第2页返回上一页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
         
            .btn{
                width: 100px;
                height: 30px;
                background: green;
                border: none;
                color: white;
                margin: 6px 10px;
            }
            .btnStyle1{
                border-radius: 6px;
            }
            .btnStyle2{
                border-radius: 26px 6px;
            }
            .btnStyle3{
                border-radius: 6px 26px 60px;
            }
            .btnStyle4{
                border-radius: 6px 126px 236px 346px;
            }
            .bolder{
                border: solid 1px green;
                width: 500px;
                height: 40px;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <p class="bolder">
        <button class="btn btnStyle1">按钮1</button>
        <button class="btn btnStyle2">按钮2</button>
        <button class="btn btnStyle3">按钮3</button>
        <button class="btn btnStyle4">按钮4</button>
        </p>
    </body>
</html>