1.css3实现圆角矩形，兼容性有问题
|
1
2
3
4
5
6
7
8
|
<div id=
"round"
></div>
#round {
padding
:
10px
;
width
:
300px
;
height
:
50px
;
border
:
5px
solid
#dedede
;
-moz-border-radius:
15px
;
/* Gecko browsers */
-webkit-border-radius:
15px
;
/* Webkit browsers */
border-radius:
15px
;
/* W3C syntax */
}
|
css3的，很多小的浏览器不兼容，360之类的.
2.拼图的方法实现圆角矩形
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<style type=
"text/css"
>
.b
1
,.b
2
,.b
3
,.b
4
,.b
1
b,.b
2
b,.b
3
b,.b
4
b,.b{
display
:
block
;
overflow
:
hidden
;}
.b
1
,.b
2
,.b
3
,.b
1
b,.b
2
b,.b
3
b{
height
:
1px
;}
.b
2
,.b
3
,.b
4
,.b
2
b,.b
3
b,.b
4
b,.b{
border-left
:
1px
solid
#999
;
border-right
:
1px
solid
#999
;}
.b
1
,.b
1
b{
margin
:
0
5px
;
background
:
#999
;}
.b
2
,.b
2
b{
margin
:
0
3px
;
border-width
:
2px
;}
.b
3
,.b
3
b{
margin
:
0
2px
;}
.b
4
,.b
4
b{
height
:
2px
;
margin
:
0
1px
;}
.d
1
{
background
:
#F7F8F9
;}
.k {
height
:
300px
;}
</style>
</head>
<body>
<div>
<b class=
"b1"
></b><b class=
"b2 d1"
></b><b class=
"b3 d1"
></b><b class=
"b4 d1"
></b>
<div class=
"b d1 k"
>
<font style=
"font-size:26px;color:red; margin:0px 10px;"
>简洁型css圆角矩形</font>
</div>
<b class=
"b4b d1"
></b><b class=
"b3b d1"
></b><b class=
"b2b d1"
></b><b class=
"b1b"
></b>
</div>
|
不过这个在ie7下有问题，下面的会和上面的脱节，所以最好用css hack解决一下.~
3，直接图片吧，最简单的方式
不过自适应高度的话有些问题，所以小改进一下
|
1
2
3
4
5
6
7
8
|
<
style
>
.top{backgroup:上边带弧度的一小部分}
.bottom{backgroup:下边带弧度的一小部分}
.content{border-left:1px solid 颜色;border-right:1px solid 颜色}
</
style
>
<
p
class
=
"top"
></
p
>
<
div
class
=
"content"
></
div
>
<
p
class
=
"bottom"
></
p
>
|
这种方式可能也有兼容性的问题，用position解决吧..
最近写网页发现一个问题.~在出现兼容性的问题的时候，发现ie7下和360下是完全一样的问题。。所以如果老板要必须兼容360浏览器的话，那就解决了ie7就可以了~
本文转自 3147972 51CTO博客，原文链接：http://blog.51cto.com/a3147972/1216062，如需转载请自行联系原作者
