css圆角

最新推荐文章于 2025-01-01 20:57:24 发布

原创最新推荐文章于 2025-01-01 20:57:24 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #IE #HTML

xhtml+css 专栏收录该内容

3 篇文章

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style>
            .roundCorner {
                background: #33FF66;
                border: 1px solid #333;
                position: relative; /* 此属性为了形成自己的容器边界,保证下面2个圆角正确显示 */
		height:200px; /* 触发ie的haslayout，保证在ie6下正确显示下面2个圆角 */
            } .lt, .rt, .lb, .rb {
                background: url(images/cr_big.gif) no-repeat;
                display: block;
                height: 18px;
                position: relative;
                clear: both;
		font-size:0; /* for ie6 */
            } .lt {
                width: 100%;
                background-position: 0px -36px;
                position: absolute;
                left: -1px;
                top: -1px;
            } .rt {
                background-position: right 0;
                right: -2px;
            } .lb {
                width: 100%;
                background-position: 0px -54px;
                left: -1px;
                position: absolute;
                bottom: -1px;
            } .rb {
                background-position: right -18px;
                right: -2px;
            } .content {
                margin: 10px;
            }
        </style>
    </head>
    <body>
	<div class="roundCorner">
            <span class="lt"><span class="rt"></span></span>
            <span class="lb"><span class="rb"></span></span>
            <div class="content">
                <span>adfadsfadfad</span>
                <span>adsfasdfasdf</span>
            </div>
        </div>
    </body>
</html>