◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
纯CSS实现圆角框
Post by 张美工, 2009-6-25, Views:纯CSS做的...
复制代码保存为网页文件即可...
圆角外是透明的,不受下层背景色影响
给你做了有边框和无边框的两个算法,
好好研究下就明白...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS圆角</title>
<style type="text/css">
.round { width:200px; left:100px; top:100px; position:absolute; background:none; overflow:none;}
.round_conner{ background:none; overflow:none;}
.round_body{ height:190px; background:#abc ; overflow:none;}
.round_body_contain { padding:10px;}
.l1,.l2,.l3,.l4{ font-size:0; height:1px; overflow:none; width:auto; background:#abc;clear:both;}
.l1 {margin:0 5px;}
.l2 {margin:0 3px;}
.l3 {margin:0 2px;}
.l4 {margin:0 1px;}
/*用这段样式圆角是有边框的
.round { width:200px; height:200px; left:100px; top:100px; position:relative; background:none; overflow:none;}
.round_conner{ background:none; overflow:none;}
.round_body{ height:190px; background:#abc ; overflow:none; border-left:1px #000 solid; border-right:1px #000 solid;}
.round_body_contain { padding:10px;}
.l1,.l2,.l3,.l4{ font-size:0; height:1px; overflow:none; width:auto; background:#abc; clear:both; border-left:1px #000 solid; border-right:1px #000 solid;}
.l1 {margin:0 5px; background:#000; border:none;}
.l2 {margin:0 3px; border-left:2px #000 solid; border-right:2px #000 solid;}
.l3 {margin:0 2px;}
.l4 {margin:0 1px;}
*/
</style>
</head>
<body>
<div class="round">
<div class="round_conner">
<div class="l1">
</div>
<div class="l2">
</div>
<div class="l3">
</div>
<div class="l4">
</div>
<div class="l4">
</div>
</div>
<div class="round_body" >
<div class="round_body_contain">
内容在这里边....<br/>
内容在这里边....<br/>
内容在这里边....<br/>
</div>
</div>
<div class="round_conner">
<div class="l4">
</div>
<div class="l4">
</div>
<div class="l3">
</div>
<div class="l2">
</div>
<div class="l1">
</div>
</div>
</div>
</body>
</html>
.round的width是必须设的
.round_body的height推荐也设上,
.round_body[height]+10 = .round[height]
另附:FF,Safari和Chrome 可分别用以下属性来设置圆角(CSS 3.0)
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
编辑人: carkey712
Tags: 纯CSS实现圆角框
分类:css+div | 评论:1 | 引用:0
或许你还对下面的文章感兴趣
Comments
1.脚本爱好者- http://www.scriptlover.com
- 加油 ，用心的站长；z 于 2009-6-25 14:14:14 回复谢谢,呵呵 我们一起努力!
- 2009-6-25 12:12:19 回复
<#template:pagebar#>
最新文章
最新评论
Guest
Powered By Z-Blog 1.8 Spirit Build 80605. Based on valid CSS 2.0 欢迎各界朋友光临本站，一起学习、共同探讨！Copyright zhangming WebSite. Some Rights Reserved.
