CSS3中圆角(border-radius)的实现

实现边框圆角
border-radius: 32px;
behavior: url(border-radius.htc);

-moz-border-radius: 32px;
-webkit-border-radius: 32px;

<html>  
    <head>  
      
    <style type="text/css">  
    body {  
        background-color: #fff;  
        font: normal 11pt Trebuchet MS,Arial,sans-serif;  
    }  
      
    .box1 {  
        background-color: #f0f0f0;  
        width: 533px;  
        height: 50px;  
        margin: 0 auto 50px auto;  
        padding: 20px;  
        border: 1px solid #d7d7d7;  
      
        -moz-border-radius: 11px;  
        -webkit-border-radius: 11px;  
        border-radius: 10px;  
          
    }  
      
    .box2 {  
        background: transparent url(ashera.jpg); no-repeat top left;  
        width: 420px;  
        height: 220px;  
        margin: 0 auto 35px auto;  
        padding: 30px;  
        color: #fff;  
        font-weight: bold;  
        border: 11px solid #35b70e;  
      
        -moz-border-radius: 32px;  
        -webkit-border-radius: 32px;  
        border-radius: 32px;  
        behavior: url(border-radius.htc);  
    }  
      
    .box3 {  
        background-color: #ddd;  
        width: 210px;  
        height: 30px;  
        padding: 20px;  
        position: absolute;  
        top: 5px; left: 5px;  
      
        -moz-border-radius: 15px;  
        -webkit-border-radius: 15px;  
        border-radius: 15px;  
        behavior: url(border-radius.htc);  
    }  
      
    .rel {  
        margin: 50px 0 0 33px;  
        padding: 25px;  
        position: relative;  
        z-index: inherit;  
        zoom: 1; /* For IE6 */  
    }  
      
    </style>  
    </head>  
    <body>  
    <p>Not just divs, but any element*</p>  
        <div class="rel">  
            <div class="box1">  
                11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem      ipsum dolor sit amet lorem ipsum dolor sit amet   
            </div>  
            <div class="box2">  
                22 this cat is a hybrid of domestic and wild breeds :)  
            </div>  
            <div class="box3">  
                33 this box is absolutely positioned  
            </div>  
        </div>  
    </body>  
    </html>

CSS3中圆角(border-radius)的实现

猜你喜欢