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
>
转载请注明出处:
作者:
wy811007
出处:
http://wy811007.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
查看全文
相关阅读:
SQL注入攻击三部曲之进阶篇
SQL注入攻击三部曲之入门篇
父页面(JSP页面)传参数到子页面(JSP页面)
Flex弹出窗口请求Action函数
dojo表格分页插件报错
堆栈溢出问题 调试到位置(test dword ptr [eax],eax ; probe page.)局部数组变量定义所分配的最大空间为1M
改装的表格
FusionCharts饼图中label值太长怎么解决
dojo中的dojox/grid/EnhancedGrid表格报错
dojo表格分页之各个参数代表的意义(一)
原文地址:https://www.cnblogs.com/wy811007/p/border_radius.html
最新文章
Java中private、protected和public作用域的异同
Srtuts2实现登录界面(不连接数据库)报错(四)
C++ 中string.find() 函数的用法总结
memcached命令行参数说明
memcached对key和value的限制 memcached的key最大长度和Value最大长度
memcached for windows 修改端口和最大内存
Srtuts2实现登录界面(不连接数据库)报错(三)
Srtuts2实现登录界面(不连接数据库)报错(二)
Srtuts2实现登录界面(不连接数据库)报错(一)
ASCII码对照表
热门文章
过滤Java中特殊字符
Srtuts2实现登录界面(不连接数据库)
eclipse中添加Java代码注释模板
定价、平衡及企业需要深入思考的—leo鉴书47
我是如何在Tizen app大赛中获奖的
C/C++中sprintf的用法
IBM Rational AppScan:跨站点脚本攻击深入解析
什么是SQL注入
SQL注入原理深度解析
SQL注入攻击三部曲之高级篇
Copyright © 2011-2022 走看看