html圆角线条,实现CSS3中的border-radius(边框圆角)示例代码

实现边框圆角

-moz-border-radius: 32px;

-webkit-border-radius: 32px;

border-radius: 32px;

behavior: url(border-radius.htc);

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 */

}

Not just divs, but any element*

11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet

22 this cat is a hybrid of domestic and wild breeds :)

33 this box is absolutely positioned