当前位置： 文江博客话题详情

DIV不用图片做可变可到处用的圆角

发布于 2022-09-14 08:03:06 字数 4493 浏览 10 评论 0

1.jpg (7.25 KB, 下载次数: 1)

下载附件

2011-03-09 21:44 上传



样例，上面是两个圆角Box。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <title> New XHTML Document </title>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.   <meta name="generator" content="editplus" />
  7.   <meta name="author" content="cjx" />
  8.   <meta name="keywords" content="" />
  9.   <meta name="description" content="" />
  10.   <style type="text/css">
  11. .b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}
  12. .b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}
  13. .b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}

  15. .bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}
  16. .bt {background: #EDF7FF;margin:0 2px;padding:5px;}
  17. .bb {background: #FFFFFF;margin:0 2px;padding:5px;}

  19. /**另一种颜色*/
  20. .bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
  21. .bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/
  22. .bb3{background: #E7F9E3;}/*标题背景颜色*/
  23.   </style>
  24. </head>

  26. <body>
  27.   <b class="b1"></b><b class="b2"></b><b class="b3"></b>
  28.   <div class="bc">
  29.         <div class="bt ">标题</div>
  30.         <div class="bb">
  31.         圆角三边 这里是内容
  32.         </div>
  33.   </div>
  34.   <b class="b3"></b><b class="b2"></b><b class="b1"></b>
  35. <hr/>
  36.   <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>
  37.   <div class="bc bb2">
  38.         <div class="bt bb3">另一种颜色</div>
  39.         <div class="bb">
  40.         另一种颜色 这里是内容
  41.         </div>
  42.   </div>
  43.   <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>
  44. </body>
  45. </html>
复制代码这里是三个厚度的圆角，如果需要再圆角大一点，b这个标记多放一个，也就是多一个象素的圆角出来了。

如果要拷到新的地方使用，只要像
  1. /**另一种颜色*/
  2. .bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
  3. .bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
  4. .bb3{background: #E7F9E3;}/*标题背景颜色*/
复制代码这样添加一个样式就可以了。



谢谢大家关注补充一下：
  1. .bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
  2. 改成下面的，写处详细一点，FF就能显示了边框了，失误。
  3. .bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/
复制代码原文 http://www.javaeye.com/topic/610962

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

恏ㄋ傷疤忘ㄋ疼

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文