DIV+CSS圆角边框
简洁型css圆角：
方法1：
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 ...
随机推荐
- Android学习笔记(第二篇)View中的五大布局
PS:人不要低估自己的实力,但是也不能高估自己的能力.凡事谦为本... 学习内容: 1.用户界面View中的五大布局... i.首先介绍一下view的概念 view是什么呢?我们已经知道一个Act ...
- HTML简明教程（二）
HTML简明教程(二) 一.HTML 图像 二.HTML 表格 三.HTML 列表 四.HTML div和 span 五.HTML 布局 六.HTML 表单和输入 七.HTML 框架 八.HTML内联 ...
- 使用autotools系列工具自动部署源代码编译安装
在Linux系统下开发一个较大的项目,完全手动建立Makefile是一件费力而又容易出错的工作.autotools系列工具只需用户输入简单的目标文件.依赖文件.文件目录等就可以比较轻松地生成Makef ...
- NVelocity的基本用法
NVelocity常用语法指令 默认情况下,NVelocity解析是不分大小写的,当然可以通过设置runtime.strict.math=true,采用严格解析模式. 严格区分大小写有时候还是挺有用途 ...
- CSS3魔法堂：禁止用户改变textarea大小
一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...
- IOS开发UI基础UIView
主要介绍下UIView得基本概念和一些属性的介绍至于属性的用户后面会由详细的介绍 -.UIView基本概念 1.什么是控件? 屏幕上所有的UI元素都叫做控件 (也有很多书中叫做视图 组件) 比如 按钮 ...
- 百度地图js根据经纬度定位和拖动定位点
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- 自定义饼图(PieChart)各个PieSlice的外观
C1Chart提供了Theme和Palette接口,其中内置了很多配色方案,调整外观. <c1chart:C1Chart Margin="0,0,8,8" MinHeight ...
- 2016 一中培训 day 5 ksum
又是一天的爆零!!!!! 原本第一题 很容易做 竟然优化过度 丢了答案 1693: ksum Time Limit 1000 ms Memory Limit 524288 KBytes Judge S ...
- Oracle 中 call 和 exec的区别
今天发现了一个小东西,觉得很有意思,查找了一些资料,跟大家分享一下: 在sqlplus中: 在第三方提供的工具(如:plsqldev) 总结: exec是sqlplus的命令,只能在sqlplus中使 ...