简洁型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>

 

 

原文地址：http://www.cnblogs.com/mslove/archive/2009/03/24/1420703.html

DIV+CSS圆角边框的更多相关文章

css圆角边框
一.CSS3圆角的优点传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
第50天学习打卡（CSS 圆角边框盒子阴影定位）
4.4圆角边框圆角边框: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
DIV+CSS颜色边框背景等样式
1.使用css缩写使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两 ...
div+css 圆角加阴影
.test{ display: inline-block; padding: 5px 10px 6px; text-decoration: none; border-radius: 5px; -moz ...
向div添加圆角边框
初级参数:border-radius: 4px;中级参数:border-radius: 4px 6px 6px 4px;终极参数:border-radius: 5px 5px 3px 2px / 5p ...
CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
CSS第四天总结更多的属性圆角边框图片段落属性颜色渐变盒子阴影
圆角边框: border-radius 一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例在CSS3中我们终于 ...
[css]《css揭秘》学习（四）-一个元素实现内圆角边框
如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...
CSS3利用一个div实现内圆角边框效果
*首先要清楚的是,box-shadow的形状会随着border-radius变化.下面的例子可以证明: <!doctype html> <html lang="en&quo ...

随机推荐

EPANET中读取INPUT文件的函数文件——INPUT3.C
/* ********************************************************************** INPUT3.C -- Input data par ...
Android 学习笔记之AndBase框架学习(二) 使用封装好的进度框，Toast框，弹出框，确认框...
PS:渐渐明白,在实验室呆三年都不如在企业呆一年... 学习内容: 1.使用AbActivity内部封装的方法实现进度框,Toast框,弹出框,确认框... AndBase中AbActivity封 ...
C# 只启动一个实例完全解决方案
工作上经常会遇到"程序只能启动一个实例"这样的需求. 我想,这样的需求应该很普遍,所以没打算去动脑筋,去找谷歌问下就得了,用下来发现,不是这里不爽就是那里不行. 先说下我详细的几点 ...
一个android应用开发的感悟
对于客户端的开发,以我个人现在的水准,很难进行一个系统的讲解,只能分享下遇到的几个问题点好了! 1:对于tabhost的使用,这个东西真的是过时了:第一个版本,我是用的tabhost确实是很难用,不过 ...
IOS开发UI基础UIView
主要介绍下UIView得基本概念和一些属性的介绍至于属性的用户后面会由详细的介绍 -.UIView基本概念 1.什么是控件? 屏幕上所有的UI元素都叫做控件 (也有很多书中叫做视图组件) 比如按钮 ...
mysql 输出当前月所有日期与对应的星期
其实可以用存储过程,但想用另一种方法实现: 首先创建一个辅助表,可以设置CREATE TABLE `t4` ( `id` ) NOT NULL AUTO_INCREMENT, `num` ) DEFA ...
数论 - Miller_Rabin素数测试 + pollard_rho算法分解质因数 ---- poj 1811 : Prime Test
Prime Test Time Limit: 6000MS Memory Limit: 65536K Total Submissions: 29046 Accepted: 7342 Case ...
C# WinForm 技巧八：界面开发之“WeifenLuo.WinFormsUI.Docking+OutLookBar” 使用
概述转自 http://www.cnblogs.com/luomingui/archive/2013/09/19/3329763.html 最近几天一直在关注WinFrom方面的文章有想着提炼一下 ...
csharp:Chart
http://www.dotnetperls.com/chart using System; using System.Windows.Forms; using System.Windows.Form ...
MySQL备份与恢复
1．通过mysqldump命令进行数据备份 mysql数据库的备份采用直接打包数据库文件夹(注:InnoDB引擎不支持直接拷贝数据文件备份数据库,由于使用InnoDB引擎的库或表是不能使用此种方式): ...

DIV+CSS圆角边框

3D圆角矩形

反向css圆角矩形

略带菱形的css圆角矩形

特殊css圆角矩形

DIV+CSS圆角边框的更多相关文章

随机推荐

热门专题