简洁型css圆角：

方法1：

简洁型css圆角矩形

code1:

<style type="text/css">
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
.k {height:300px;}
</style>
</head>

<body>
<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1 k">
<font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>

方法2：


无图片实现圆角框

code2:

<style type="text/css">
div.RoundedCorner{background:#9BD1FA; width:400px;}
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}
</style>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

3D圆角矩形:

3D圆角矩形

CODE:

<style type="text/css">
.raised{background:transparent;width:40%;}
.raised h1,.raised p{margin:0 10px;}
.raised h1{font-size:2em;color:#fff;}
.raised p{padding-bottom:0.5em;}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{display:block;overflow:hidden;font-size:1px;}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px;}
.raised .b2{background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;}
.raised .b3{background:#ccc;border-left:1px solid #fff;border-right:1px solid #ddd;}
.raised .b4{background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;}
.raised .b4b{background:#ccc;border-left:1px solid #eee;border-right:1px solid #999;}
.raised .b3b{background:#ccc;border-left:1px solid #ddd;border-right:1px solid #999;}
.raised .b2b{background:#ccc;border-left:1px solid #aaa;border-right:1px solid #999;}
.raised .b1{margin:0 5px;background:#fff;}
.raised .b2, .raised .b2b{margin:0 3px;border-width:0 2px;}
.raised .b3, .raised .b3b{margin:0 2px;}
.raised .b4, .raised .b4b{height:2px; margin:0 1px;}
.raised .b1b{margin:0 5px; background:#999;}
.raised .boxcontent{display:block;background:#ccc;border-left:1px solid #fff;border-right:1px solid #999;}
</style>
</head>

<body>

<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>3D圆角矩形</h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

反向css圆角矩形:

反向css圆角矩形

CODE:

<style type="text/css">
.serif {
  background: transparent; width:40%;
  }
.serif h1, .serif p {
  margin:0 10px;
  }
.serif h1 {
  font-size:2em; color:#fff;
  }
.serif p {
  padding-bottom:0.5em;
  }
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {
  display:block; 
  overflow:hidden;
  font-size:1px;
  }
.serif .b1, .serif .b2, .serif .b3 {
  height:1px;
  }
.serif .b2, .serif .b3 {
  background:#fc0; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }
.serif .b4 {
  background:#fc0; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }
.serif .b1 {
  margin:0; background:#fff;
  }
.serif .b2 {
  margin:0 1px; 
  border-width:0 2px;
  }
.serif .b3 {
  margin:0 3px;
  }
.serif .b4 {
  height:2px; 
  margin:0 4px;
  }
.serif .boxcontent {
  display:block;  
  background:#fc0; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff; 
  margin:0 5px;
  }

</style>

<div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>反向css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

略带菱形的css圆角:

略带菱形的css圆角矩形

CODE:

<style type="text/css">
.curved {
  background:transparent; 
  width:40%;
  }
.curved h1, .curved p {
  margin:0 10px;
  }
.curved h1 {
  font-size:2em; 
  color:#fff;
  }
.curved p {
  padding-bottom:0.5em;
  }
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
  display:block; 
  overflow:hidden; 
  height:1px;
  font-size:1px;
  }
.curved .b2, .curved .b3, .curved .b4 {
  background:#e0cea3; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }
.curved .b1 {
  margin:0 4px; 
  background:#fff;
  }
.curved .b2 {
  margin:0 4px; 
  height:2px;
  }
.curved .b3 {
  margin:0 3px;
  }
.curved .b4 {
  margin:0; 
  height:1px; 
  border-width:0 3px 0 3px;
  }
.curved .boxcontent {
  display:block; 
  background:#e0cea3; 
  border:0 solid #fff; 
  border-width:0 1px;
  }
</style>

<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>略带菱形的css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

特殊CSS圆角：

特殊css圆角矩形

CODE：

<style type="text/css">
.pillar {
  background:transparent; 
  width:40%;
  }
.pillar h1, .pillar p {
  margin:0 10px;
  }
.pillar h1 {
  font-size:2em; 
  color:#fff;
  }
.pillar p {
  padding-bottom:0.5em;
  }
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {
  display:block; 
  overflow:hidden;
  font-size:1px;
  }
.pillar .b1, .pillar .b2, .pillar .b4 {
  height:1px;
  }
.pillar .b2, .pillar .b3 {
  background:#d66; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }
.pillar .b4 {
  background:#d66; 
  border-left:4px solid #fff; 
  border-right:4px solid #fff;
  }
.pillar .b1 {
  margin:0 2px; 
  background:#fff;
  }
.pillar .b2 {
  margin:0 1px; 
  border-width:0 1px;
  }
.pillar .b3 {
  height:2px; 
  margin:0;
  }
.pillar .b4 {
  margin:0 2px;
  }
.pillar .boxcontent {
  display:block; 
  background:#d66; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff; 
  margin:0 5px;
  }
</style>

<div class="pillar">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
<div class="boxcontent">
<h1>特殊css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

转载于:https://www.cnblogs.com/12go/archive/2011/11/17/2252877.html

DIV+CSS圆角边框相关推荐

  1. html 中圆角怎么写,css圆角边框代码怎么写？（代码示例）

    本篇文章主要给大家介绍css边框效果怎么实现的. css圆角边框代码具体示例如下: css圆角边框代码实例 div { color: white; text-align:center; border: ...

  2. css圆角边框怎么设置

    css+div是页面设计的法宝,通过css+div能够设计出各种效果!本文给大家简单介绍下css圆角边框怎么设置,大家可以参考,也可以直接拿过去使用,当然要修改下具体的参数. border-radiu ...

  3. html圆角边框只有左边,border-radius以外的CSS圆角边框制作方法

    CSS3的border-radius利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角. 先说第一种,利用CSS3,前提是 ...

  4. CSS圆角边框、盒子阴影、文字阴影（01-07课）

    01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作 代码: &l ...

  5. html给div加圆角边框,border-radius是向元素添加圆角边框的方法

    原标题:border-radius是向元素添加圆角边框的方法 border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px ...

  6. html圆角边框怎么做,CSS圆角边框制作指南与实例

    使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的. CS ...

  7. CSS / 圆角边框+阴影+浮动

    目录 圆角边框 盒子阴影 文字阴影 传统网页布局的三种方式 浮动 浮动特性 浮动元素经常和标准流父级搭配使用 常见的网页布局案例 浮动布局注意点 圆角边框 语法:border-radius: 半径; ...

  8. CSS圆角边框和盒子阴影

    圆角边框 1.圆形 语法 border-radius:length; 方法:让一个正方形变成圆圈 div {width: 200px;height: 200px;background-color: p ...

  9. CSS圆角边框-盒子阴影-文字阴影

    圆角边框 border-radius: 10px; radius半径原理:(椭)圆与边框的交集形成圆角效果. 参数值可以是数值或百分比形式: 如果是正方形,想要设置一个圆,把数值改为高度或宽度的一半, ...

最新文章

  1. 随机网络构建_构建随机报价机
  2. 双轴机械臂位置闭环控制：STC8H1K28，42HS48EIS,BH32
  3. spring 配置文件 数据库引入
  4. Spring4：没有默认构造函数的基于CGLIB的代理类
  5. 切记！节前给数据库做个巡检
  6. WORD图片批量居中？
  7. 学会5个数据分析常见定律，数据敏感度提升N个度
  8. Ubuntu20.04 设置开机自启shell脚本
  9. Confluence 6 LDAP 用户结构设置
  10. mysql的 case用法_Mysql casewhen的三种用法
  11. ips 代理模式_IPS的完整形式是什么？
  12. 我的世界手机版服务器显示即将推出,我的世界1.11-pre1发布 正式版本官方即将推出...
  13. 项目实施过程中的风险控制
  14. 为程序员爆肝整理的防治脱发大集锦
  15. 您应该学习SwiftUI，UIKit还是同时学习两者？
  16. 【Linux系列文章】基础与Vim
  17. 苹果官方揭秘：这个强大的相册功能是如何实现的？
  18. 计算机开机桌面黑屏怎么办,小编教你电脑启动后黑屏该怎么办
  19. win10 修复打印机服务器,Windows Update修复了打印机错误(win10/win7)
  20. call指令和ret指令【笔记+详解】

热门文章

  1. 闪耀澳网 跨界新品泸州老窖国窖1573澳网冠军版发布
  2. Robot framework 二次开发笔记
  3. 一款低延迟的分布式数据库同步系统--databus
  4. 关于Messenger实现进程间通信
  5. 试玩 go-socks5
  6. Java面向对象知识点精华
  7. C# 设计时动态改变实体在PropertyGrid中显示出来的属性
  8. sql server CI
  9. linux终端拷贝文件内容
  10. 我的服务器有硬件防火墙，而且只开了80端口，是不会有网络安全问题的