css中如何实现圆角效果(2)-木庄网络博客

示例：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <style>
            div {
                padding: 20px;
                width: 200px;
                height: 150px;
            }
             
            #rcorners1 {
                border-radius: 25px;
                background: #8AC007;
            }
             
            #rcorners2 {
                border-radius: 25px;
                border: 2px solid #8AC007;
            }
             
            #rcorners3 {
                border-radius: 25px;
                background: url(/images/paper.gif);
                background-position: left top;
                background-repeat: repeat;
            }
        </style>
    </head>
 
    <body>
        <p>指定背景颜色元素的圆角:</p>
        <div id="rcorners1">圆角</div>
        <p>指定边框元素的圆角:</p>
        <div id="rcorners2">圆角</div>
        <p>指定背景图片元素的圆角:</p>
        <div id="rcorners3">圆角</div>
 
    </body>
 
</html>