CSS圆角背景，适用于各主流浏览器的兼容

（1）全部的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Test</title>
        <style type="text/css">
        body,div {
            margin: 0;
            padding: 0;
        }
        body {
            text-align: center;
        }
        .coner {
            margin:20px;
            position: relative;
            padding: 11px;
            width: 200px;
            height: 150px;
            background-color:#DCEAFF;
        }
        .comm {
            position: absolute;
            width: 11px;
            height: 11px;
            background: url(corner.gif) no-repeat;
        }
        .leftTop {
            top:0;
            left:0;
            background-position: -1px -1px;
        }
        .rightTop {
            top:0;
            right:0;
            background-position: -12px -1px;
        }
        .leftBottom {
            left: 0;
            bottom: 0;
            background-position: -1px -12px;
        }
        .rightBottom {
            right:0;
            bottom: 0;
            background-position: -12px -12px;
        }
        </style>
    </head>
    <body>
        <div class="coner">
            <div class="comm leftTop"></div>
            <div class="comm rightTop"></div>
            <div class="comm leftBottom"></div>
            <div class="comm rightBottom"></div>
        </div>
    </body>
</html>

（2）效果如下：

来源：https://www.cnblogs.com/lyl521/archive/2011/08/12/2136593.html

标签

css

娱乐八卦