300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html table的边框线怎么变圆角_实现CSS3中的border-radius(边框圆角)示例代码

html table的边框线怎么变圆角_实现CSS3中的border-radius(边框圆角)示例代码

时间:2024-05-16 00:25:22

相关推荐

html table的边框线怎么变圆角_实现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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。