圆角的子框架

happydaisy1985 2009-08-06 05:55:31

css可以实现圆角的子框架吗？给出代码，谢谢！

...全文

74 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

atmo 2009-08-07

打赏
举报

这个问题我专门总结过
http://www.fanxiaodong.com.cn/demo/css/yuanjiao/index.html

捏造的信仰 2009-08-07

打赏
举报

楼主不考虑 IE 的话，其实实现圆角很容易：
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

xinyung 2009-08-07

打赏
举报

才疏学浅，学习了

shenzhenNBA 2009-08-06

打赏
举报

不用图片，综合运用 CSS 可以做到圆角边框的问题，有个高手写过。。。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>半圆角边框问题</title>

</head>

<body>

<style type="text/css">

p{font-family:verdana; font-size:12px; font-weight:normal; color:#333333;}

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}

#xsnazzy h1 {font-size:2.5em; color:#fff;}

#xsnazzy h2 {font-size:2em;color:#06a; border:0;}

#xsnazzy p {padding-bottom:0.5em;}

#xsnazzy h2 {padding-top:0.5em;}

#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}

.xb1 {margin:0 5px; background:#08c;}

.xb2 {margin:0 3px; border-width:0 2px;}

.xb3 {margin:0 2px;}

.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}

</style>

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent" style="padding:0px; margin:0px;">

<h1>圆角框架</h1>

<p>内容层</p>

<p>内容层</p>

<p>内容层</p>

<p>内容层</p>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

<br>效果图：

</div>

</body>

</html>