既是圆角又是半透明的那种矩形怎么用div+css写出来……
3个回答
展开全部
不要图片评出来的圆角矩形
<!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>纯透明圆角矩形框，无背景图片</title>
<style>
*{ margin:0px; padding:0px;}
#main{ width:200px; margin:50px auto;}
#main .middle{ width:198px; height:20px; border-left:1px solid #999; border-right:1px solid #999; margin:0px auto; overflow:hidden; font-size:12px;}
.top1,.top2,.top3,.top4,.bo1,.bo2,.bo3,.bo4{ height:1px; border-right:1px solid #999; margin:0px auto; border-left:1px solid #999; overflow:hidden }
.top4,.bo4{ width:196px; height:2px;}
.top3,.bo3{ width:194px;}
.top2,.bo2{ width:190px; border-width:2px;}
.top1,.bo1{ width:188px; background:#999;}
#main div{opacity:0.5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); background:#999;}
</style>
</head><body><div id="main">
<div class="top1"></div>
<div class="top2"></div>
<div class="top3"></div>
<div class="top4"></div>
<div class="middle">
所有圆形边角都是半透明
</div>
<div class="bo4"></div>
<div class="bo3"></div>
<div class="bo2"></div>
<div class="bo1"></div>
</div></body>
</html>
<!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>纯透明圆角矩形框，无背景图片</title>
<style>
*{ margin:0px; padding:0px;}
#main{ width:200px; margin:50px auto;}
#main .middle{ width:198px; height:20px; border-left:1px solid #999; border-right:1px solid #999; margin:0px auto; overflow:hidden; font-size:12px;}
.top1,.top2,.top3,.top4,.bo1,.bo2,.bo3,.bo4{ height:1px; border-right:1px solid #999; margin:0px auto; border-left:1px solid #999; overflow:hidden }
.top4,.bo4{ width:196px; height:2px;}
.top3,.bo3{ width:194px;}
.top2,.bo2{ width:190px; border-width:2px;}
.top1,.bo1{ width:188px; background:#999;}
#main div{opacity:0.5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); background:#999;}
</style>
</head><body><div id="main">
<div class="top1"></div>
<div class="top2"></div>
<div class="top3"></div>
<div class="top4"></div>
<div class="middle">
所有圆形边角都是半透明
</div>
<div class="bo4"></div>
<div class="bo3"></div>
<div class="bo2"></div>
<div class="bo1"></div>
</div></body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div id="box">
<div class="box-top">
<div class="box-top-left"></div>
<div class="box-top-middle"></div>
<div class="box-top-ridth"></div>
</div>
<div id="box-content"></div>
<div class="box-bottom">
<div class="box-bottom-left"></div>
<div class="box-bottom-middle"></div>
<div class="box-bottom-ridth"></div>
</div>
</div>
或者再简单点就是
<div id="box">
<div class="box-top"> </div>
<div id="box-content"></div>
<div class="box-bottom"></div>
</div>
注：以上再在css里面用图片圆角以及边框图片修饰背景就OK了。
<div class="box-top">
<div class="box-top-left"></div>
<div class="box-top-middle"></div>
<div class="box-top-ridth"></div>
</div>
<div id="box-content"></div>
<div class="box-bottom">
<div class="box-bottom-left"></div>
<div class="box-bottom-middle"></div>
<div class="box-bottom-ridth"></div>
</div>
</div>
或者再简单点就是
<div id="box">
<div class="box-top"> </div>
<div id="box-content"></div>
<div class="box-bottom"></div>
</div>
注：以上再在css里面用图片圆角以及边框图片修饰背景就OK了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
