ZT文萃

本博不原创,转帖自己感兴趣那些事人物,什么入眼贴什么,随心所欲。
posts - 93, comments - 5, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

DIV+CSS圆角边框

Posted on 2013-09-15 18:33 ZT文萃 阅读(220) 评论(0)  编辑  收藏 所属分类: 前台
From:
http://www.cnblogs.com/mslove/archive/2009/03/24/1420703.html


简洁型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>
<class="b1"></b><class="b2 d1"></b><class="b3 d1"></b><class="b4 d1"></b>
<div class="b d1 k">
<font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
</div>
<class="b4b d1"></b><class="b3b d1"></b><class="b2b d1"></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">
<class="rtop"><class="r1"></b><class="r2"></b><class="r3"></b><class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<class="rbottom"><class="r4"></b><class="r3"></b><class="r2"></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">
<class="b1"></b><class="b2"></b><class="b3"></b><class="b4"></b>
<div class="boxcontent">
<h1>3D圆角矩形</h1>
</div>
<class="b4b"></b><class="b3b"></b><class="b2b"></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">
<class="b1"></b><class="b2"></b><class="b3"></b><class="b4"></b>
<div class="boxcontent">
<h1>反向css圆角矩形</h1>
</div>
<class="b4"></b><class="b3"></b><class="b2"></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">
<class="b1"></b><class="b2"></b><class="b3"></b><class="b4"></b>
<div class="boxcontent">
<h1>略带菱形的css圆角矩形</h1>
</div>
<class="b4"></b><class="b3"></b><class="b2"></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">
<class="b1"></b><class="b2"></b><class="b3"></b><class="b2"></b><class="b4"></b>
<div class="boxcontent">
<h1>特殊css圆角矩形</h1>
</div>
<class="b4"></b><class="b2"></b><class="b3"></b><class="b2"></b><class="b1"></b>
</div>
复制代码
分类: html-css

只有注册用户登录后才能发表评论。


网站导航: