<del id="geamu"></del>

<fieldset id="geamu"><menu id="geamu"></menu></fieldset>

<ul id="geamu"></ul>

<strike id="geamu"></strike>

<ul id="geamu"></ul><abbr id="geamu"></abbr>

常言笑的家

Spring, Hibernate, Struts, Ajax, RoR

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>

posted on 2009-12-22 15:44 常言笑閱讀(1593) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

My Links

Blog Stats

隨筆 - 142
文章 - 2
評論 - 39
Trackbacks - 0

常用鏈接

留言簿(5)

隨筆分類

隨筆檔案

搜索

積分與排名

積分 - 218154
排名 - 260

最新評論

1.?re: zmud命令詳細解答
博主大名鼎鼎了。我想仔細學學mush和mud.能留個聯系方式么？
--zrf
2.?re: ZMUD機器人制作(上篇)
很仔細啊謝謝樓主受教了
--老吳
3.?re: Zmud新手機器人指南
幫了新手大忙啊
--shader
4.?re: Zmud新手機器人指南
歷久常新，一直有幫助啊
--劉一笑
5.?re: JPA是什么[未登錄]
aaaa
--aaa

閱讀排行榜

評論排行榜

主站蜘蛛池模板：汾西县| 信阳市| 库尔勒市| 胶南市| 青田县| 门头沟区| 洛隆县| 保定市| 东兴市| 波密县| 仁布县| 包头市| 佳木斯市| 拜泉县| 锡林郭勒盟| 盐亭县| 封开县| 定边县| 安乡县| 肃南| 鄂温| 丹寨县| 玉林市| 济阳县| 岫岩| 恩平市| 佛教| 泽库县| 平江县| 手机| 绥芬河市| 边坝县| 沽源县| 利津县| 米泉市| 禹州市| 利川市| 威信县| 同德县| 兴仁县| 思茅市|

<ul id="qcmmg"><center id="qcmmg"></center></ul>

<ul id="qcmmg"></ul>

<ul id="qcmmg"></ul>

<fieldset id="qcmmg"><table id="qcmmg"></table></fieldset>

<fieldset id="qcmmg"><table id="qcmmg"></table></fieldset>