`
haimav
  • 浏览: 54060 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
flower168
社区版块
存档分类
最新评论

css+div实现圆角

    博客分类：
  • html
CSSHTML 
阅读更多

1：

<html><head>
<style type="text/css">
u.corner u
{
height: 1px;
font-size:1px;
display: block;
overflow: hidden;
/*author: meizz*/
text-decoration: none;
background-color: green;
}
u.corner u.h1{margin: 0 5px;}
u.corner u.h2{margin: 0 3px;}
u.corner u.h3{margin: 0 2px;}
u.corner u.h4{margin: 0 1px; height: 2px}
</style>
<head>
<body>
<div>
<u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4"></u></u>
<div style="background-color: green; height: 200">content</div>
<u class="corner"><u class="h4"></u><u class="h3"></u><u class="h2"></u><u class="h1"></u></u>
</div>
</body>
</html>


2：

<html> <head> <title>3D圆角</title> <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> </body> </html>

3：

<style type="text/css"> div#nifty{margin: 0 10%;background: #9BD1FA;width: 300px;word-break:break-all;} 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> <center> <div id="nifty"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <span style="font-size:16;color:#fff;font-family:华文行楷;"> 家穷人丑一米四九，<br> 小学文化农村户口。<br> 破屋三间病猪一头，<br> 冷锅热灶老婆没有。<br> 今日上网广征女友，<br> 革命道路并肓携手。 </span> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>

分享到：
| 免费百度搜索引擎代码、Google搜索引擎代 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics