zoukankan
html css js c++ java
DIV+CSS圆角边框
简洁型css圆角:
方法1:
简洁型css圆角矩形
code1:
<
style
type
="text/css"
>
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b
{
display
:
block
;
overflow
:
hidden
;
}
.b1,.b2,.b3,.b1b,.b2b,.b3b
{
height
:
1px
;
}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b
{
border-left
:
1px solid #999
;
border-right
:
1px solid #999
;
}
.b1,.b1b
{
margin
:
0 5px
;
background
:
#999
;
}
.b2,.b2b
{
margin
:
0 3px
;
border-width
:
2px
;
}
.b3,.b3b
{
margin
:
0 2px
;
}
.b4,.b4b
{
height
:
2px
;
margin
:
0 1px
;
}
.d1
{
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
>
方法2:
无图片实现圆角框
code2:
<
style
type
="text/css"
>
div.RoundedCorner
{
background
:
#9BD1FA
;
width
:
400px
;
}
b.rtop, b.rbottom
{
display
:
block
;
background
:
#FFF
}
b.rtop b, b.rbottom b
{
display
:
block
;
height
:
1px
;
overflow
:
hidden
;
background
:
#9BD1FA
}
b.r1
{
margin
:
0 5px
}
b.r2
{
margin
:
0 3px
}
b.r3
{
margin
:
0 2px
}
b.rtop b.r4, b.rbottom b.r4
{
margin
:
0 1px
;
height
:
2px
}
</
style
>
<
div
class
="RoundedCorner"
>
<
b
class
="rtop"
><
b
class
="r1"
></
b
><
b
class
="r2"
></
b
><
b
class
="r3"
></
b
><
b
class
="r4"
></
b
></
b
>
<
br
>
无图片实现圆角框
<
br
><
br
>
<
b
class
="rbottom"
><
b
class
="r4"
></
b
><
b
class
="r3"
></
b
><
b
class
="r2"
></
b
><
b
class
="r1"
></
b
></
b
>
</
div
>
3D圆角矩形:
3D圆角矩形
CODE:
<
style
type
="text/css"
>
.raised
{
background
:
transparent
;
width
:
40%
;
}
.raised h1,.raised p
{
margin
:
0 10px
;
}
.raised h1
{
font-size
:
2em
;
color
:
#fff
;
}
.raised p
{
padding-bottom
:
0.5em
;
}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b
{
display
:
block
;
overflow
:
hidden
;
font-size
:
1px
;
}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b
{
height
:
1px
;
}
.raised .b2
{
background
:
#ccc
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #eee
;
}
.raised .b3
{
background
:
#ccc
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #ddd
;
}
.raised .b4
{
background
:
#ccc
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #aaa
;
}
.raised .b4b
{
background
:
#ccc
;
border-left
:
1px solid #eee
;
border-right
:
1px solid #999
;
}
.raised .b3b
{
background
:
#ccc
;
border-left
:
1px solid #ddd
;
border-right
:
1px solid #999
;
}
.raised .b2b
{
background
:
#ccc
;
border-left
:
1px solid #aaa
;
border-right
:
1px solid #999
;
}
.raised .b1
{
margin
:
0 5px
;
background
:
#fff
;
}
.raised .b2, .raised .b2b
{
margin
:
0 3px
;
border-width
:
0 2px
;
}
.raised .b3, .raised .b3b
{
margin
:
0 2px
;
}
.raised .b4, .raised .b4b
{
height
:
2px
;
margin
:
0 1px
;
}
.raised .b1b
{
margin
:
0 5px
;
background
:
#999
;
}
.raised .boxcontent
{
display
:
block
;
background
:
#ccc
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #999
;
}
</
style
>
</
head
>
<
body
>
<
div
class
="raised"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="boxcontent"
>
<
h1
>
3D圆角矩形
</
h1
>
</
div
>
<
b
class
="b4b"
></
b
><
b
class
="b3b"
></
b
><
b
class
="b2b"
></
b
><
b
class
="b1b"
></
b
>
</
div
>
反向css圆角矩形:
反向css圆角矩形
CODE:
<
style
type
="text/css"
>
.serif
{
background
:
transparent
;
width
:
40%
;
}
.serif h1, .serif p
{
margin
:
0 10px
;
}
.serif h1
{
font-size
:
2em
;
color
:
#fff
;
}
.serif p
{
padding-bottom
:
0.5em
;
}
.serif .b1, .serif .b2, .serif .b3, .serif .b4
{
display
:
block
;
overflow
:
hidden
;
font-size
:
1px
;
}
.serif .b1, .serif .b2, .serif .b3
{
height
:
1px
;
}
.serif .b2, .serif .b3
{
background
:
#fc0
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
.serif .b4
{
background
:
#fc0
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
.serif .b1
{
margin
:
0
;
background
:
#fff
;
}
.serif .b2
{
margin
:
0 1px
;
border-width
:
0 2px
;
}
.serif .b3
{
margin
:
0 3px
;
}
.serif .b4
{
height
:
2px
;
margin
:
0 4px
;
}
.serif .boxcontent
{
display
:
block
;
background
:
#fc0
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
margin
:
0 5px
;
}
</
style
>
<
div
class
="serif"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="boxcontent"
>
<
h1
>
反向css圆角矩形
</
h1
>
</
div
>
<
b
class
="b4"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b1"
></
b
>
</
div
>
略带菱形的css圆角:
略带菱形的css圆角矩形
CODE:
<
style
type
="text/css"
>
.curved
{
background
:
transparent
;
width
:
40%
;
}
.curved h1, .curved p
{
margin
:
0 10px
;
}
.curved h1
{
font-size
:
2em
;
color
:
#fff
;
}
.curved p
{
padding-bottom
:
0.5em
;
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4
{
display
:
block
;
overflow
:
hidden
;
height
:
1px
;
font-size
:
1px
;
}
.curved .b2, .curved .b3, .curved .b4
{
background
:
#e0cea3
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
.curved .b1
{
margin
:
0 4px
;
background
:
#fff
;
}
.curved .b2
{
margin
:
0 4px
;
height
:
2px
;
}
.curved .b3
{
margin
:
0 3px
;
}
.curved .b4
{
margin
:
0
;
height
:
1px
;
border-width
:
0 3px 0 3px
;
}
.curved .boxcontent
{
display
:
block
;
background
:
#e0cea3
;
border
:
0 solid #fff
;
border-width
:
0 1px
;
}
</
style
>
<
div
class
="curved"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="boxcontent"
>
<
h1
>
略带菱形的css圆角矩形
</
h1
>
</
div
>
<
b
class
="b4"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b1"
></
b
>
</
div
>
特殊CSS圆角:
特殊css圆角矩形
CODE:
<
style
type
="text/css"
>
.pillar
{
background
:
transparent
;
width
:
40%
;
}
.pillar h1, .pillar p
{
margin
:
0 10px
;
}
.pillar h1
{
font-size
:
2em
;
color
:
#fff
;
}
.pillar p
{
padding-bottom
:
0.5em
;
}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4
{
display
:
block
;
overflow
:
hidden
;
font-size
:
1px
;
}
.pillar .b1, .pillar .b2, .pillar .b4
{
height
:
1px
;
}
.pillar .b2, .pillar .b3
{
background
:
#d66
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
.pillar .b4
{
background
:
#d66
;
border-left
:
4px solid #fff
;
border-right
:
4px solid #fff
;
}
.pillar .b1
{
margin
:
0 2px
;
background
:
#fff
;
}
.pillar .b2
{
margin
:
0 1px
;
border-width
:
0 1px
;
}
.pillar .b3
{
height
:
2px
;
margin
:
0
;
}
.pillar .b4
{
margin
:
0 2px
;
}
.pillar .boxcontent
{
display
:
block
;
background
:
#d66
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
margin
:
0 5px
;
}
</
style
>
<
div
class
="pillar"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="boxcontent"
>
<
h1
>
特殊css圆角矩形
</
h1
>
</
div
>
<
b
class
="b4"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b1"
></
b
>
</
div
>
查看全文
相关阅读:
[HDU2136] Largest prime factor(素数筛)
[luoguP1082] 同余方程(扩展欧几里得)
基本数论算法
[luoguP2444] [POI2000]病毒(AC自动机 + dfs)
[luoguP2564] [SCOI2009]生日礼物(队列)
在EditText插入表情,并发送表情
程序员自我提高的几点建议
CSS3悬停特效合集Hover.css
带动画效果的jQuery手风琴
android程序的真正入口
原文地址:https://www.cnblogs.com/12go/p/2252877.html
最新文章
VS注释与取消注释快捷键
求x,y
求x,y
企业成本管理会计
企业成本管理会计
bzoj2730
bzoj3191
poj1980
bzoj3192
bzoj1834
热门文章
bzoj2539
poj2228
bzoj3224
bzoj3275
LA 4726 再看斜率优化
[HDU2196]Computer(DP)
[luoguP1077] 摆花(DP)
[TyvjP1050] 最长公共子序列(DP)
[BZOJ1029] [JSOI2007]建筑抢修(贪心 + 优先队列)
[HDU1576] A/B(扩展欧几里得)
Copyright © 2011-2022 走看看