您现在的位置:首页 >> 软件开发 >> 内容

CSS下无图片实现圆角框

时间:2023-12-12 23:13:44 点击:

  核心提示:htmlheadtitlecss圆角效果--七度空间网页教学网/titlemeta http-equiv='content-type' content='text/html; charset=gb23...

<html>
<head>
<title>css圆角效果--七度空间网页教学网</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">


div.RoundedCorner{width:200px;background: #9BD1FA}
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}


.wz{padding:2px;2px;2px;2px;}


</style>
</head>
<body>


<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="wz">无图片实现圆角框</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>


</body>
</html>

作者:站长 来源:网络
相关文章
  • 没有相关文章
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • 陈工笔记(www.dui580.com) © 2024 版权所有 All Rights Reserved.
  • 站长:陈工 微信号:chengongbiji QQ:24498854
  • Powered by 陈工