绘制圆角

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        fieldset {
            width: 216px;
            border: none;
            background-color: #ddd;
        }

            fieldset legend {
                background-color: #ddd;
                padding: 0 64px 0 2px;
            }

            fieldset > ol {
                list-style: none;
                padding: 0;
                margin: 2px;
            }

                fieldset > ol > li {
                    margin: 0 0 9px 0;
                    padding: 0;
                }
            /*使输入框独立成一行*/
            fieldset input {
                display: block;
            }

        input {
            width: 200px;
            background-color: #fff;
            border: 1px solid #bbb;
        }

            input[type="submit"] {
                width: 202px;
                padding: 0;
                background-color: #bbb;
            }
        input, fieldset, legend {
        border-radius:5px;
        /*火狐圆角*/
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        }

    </style>
</head>
<body>
    <form action="About.aspx" method="post">
        <fieldset id="login">
            <legend>Log in</legend>
            <ol>
                <li>
                    <label for="email">Email</label>
                    <input id="email" type="email" name="email" />
                </li>
                <li>
                    <label for="password">Password</label>
                    <input id="password" type="password" name="password" value="" autocomplete="off" />
                </li>
                <li>
                    <input type="submit" value="Log in" /></li>
            </ol>
        </fieldset>
    </form>
</body>
</html>

　　效果

 

posted @ 2012-11-13 10:21  bradleydan  阅读(105)  评论(0)    收藏  举报