- 浏览: 25692 次
- 性别:
- 来自: 北京
文章分类
最新评论
文章来源:http://www.cnblogs.com/mslove/archive/2009/03/24/1420703.html
1、圆角边框
2、
3、
4、
5、
6、
1、圆角边框
<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> <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、
<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
3、
<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> 复制代码
4、
<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>
5、
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>
6、
<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>
发表评论
-
录屏软件
2015-09-14 15:31 01、LICEcap 这个录屏软件已用过,比较好用, 最后 ... -
switch 语句
2015-07-23 15:01 442switch 语句是 if 语句的兄弟语句。 一、 if ( ... -
常用编辑器
2015-06-19 10:52 0dw eclipse Sublime Brackets W ... -
sublime text3 安装及快捷键--ruby环境安装
2015-06-18 16:46 0安装插件:http://www.cnblogs.com/Ris ... -
远程关机
2014-10-31 16:15 0若要关闭远程访问的计算机,可按Alt+F4调出 注销 关机 ... -
向上/向下 取整
2014-10-15 15:58 5961.丢弃小数部分,保留整数部分 parseInt(5/2) ... -
jquery获取焦点后光标在字符串后
2014-09-27 18:05 0jquery获取焦点后光标在字符串后,当input获得焦点后, ... -
解除绑定
2014-09-27 17:44 0$(this).unbind("click" ... -
sass 学习
2014-08-21 17:11 0学习sass: http://www.w3cplus.com ... -
sublime 安装插件
2014-08-21 17:11 01、首先下载sublime(可以在360管家中直接下载)。-- ... -
sass 考拉的安装
2014-08-21 15:57 0安装环境:http://www.w3cplus.com/sas ... -
轻量级图形报表工具JSCharts (JSChart),内置函数中文参考
2014-08-19 16:55 0JSChart是一个轻量级的在 ... -
AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
2014-07-29 17:28 3691、什么是 AJAX ? AJAX = 异步 JavaScr ... -
各种小例子
2014-06-06 17:15 4721、加载页面后,直接跳转到想要的位置。 jQuery.fn ... -
网页在线验证工具
2014-06-06 15:54 0网页在线验证工具(W3C国际标准验证) 免费在线检测你的网 ... -
通配符*的使用
2014-02-18 11:03 302css 通配符 "*" 可以消除浏览器的默 ... -
添加到收藏夹
2013-11-25 15:51 363支持火狐和ie <script type="t ... -
ie中改变滚动条的样式(overflow-y:auto)
2013-10-14 18:07 2895首先写一个div,设置宽 ... -
css自动换行 ie6 css强制换行 white-space:nowrap
2013-10-13 10:27 431网页中有这样的需求,外层宽度固定了,内层每个li宽度不定,依靠 ... -
如何使浮动的元素居中
2013-09-05 17:43 923<div class="content ...
相关推荐
自定义TextView带边框,可以动态更边框颜色以及字体颜色,可设置边框圆角
Jquery实现圆角边框效果的源码,Jquery实现圆角边框效果的源码
可设置圆角背景边框的的按钮 通过调节色彩明度自动计算按下(pressed)状态颜色 Gradle repositories { maven { url "https://jitpack.io" } } dependencies { compile 'com.github.czy1121:roundbutton:1.1.0' ...
使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的. CSS 很直观, 但显然...
本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下 在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 Container( margin: EdgeInsets.only(left: 40, ...
首先我将贴出几种实现圆角边框的dmeo程序效果图: 方式一:使用shape元素填充背景,设置圆角/带弧度的角 1、首先在 \res\drawable下新建Shape为根元素的资源文件:corners_bg.xml, 代码如下: <?xml version=...
css3圆角边框 效果图 代码 test.html 说明:由于该样式篇幅较小,将css样式与html结构写在一个页面,建议分开写! 步骤一 先新建一个盒子模型,为了将其居中,设置好内外边距 步骤二 设置宽度、高度、背景颜色 ...
.
最近在做按钮的时候遇到在给按钮设置一张图片作为背景的同时还要自己定义圆角,最简单的做法就是直接切张圆角图作为按钮就可以了,但是如果不这样该怎么办呢,看代码: 下面来看效果图 一、先建一个圆角的shape...
网页制作Webjx文章简介:到现在为止,只有一些已经工作的CSS3特性... 到现在为止,只有一些已经工作的特性,他们中的一些如下:圆角从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网站
做圆角边框一般有两种方法,背景图片或者DIV+CSS拼出来。
CSS3的border-radius利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角。 先说第一种,利用CSS3,前提是您的浏览器必须支持CSS3,Firefox3是支持的...
最近要实现个圆角边框的对话框设计图,查了网上很多种实现,都差不多,从中得到灵感,实现了另一种方式,利用layer-list: 先来看看实现的效果如下: 首先在drawable目录下定义好圆角背景文件dialog_corner_bg.xml ...
自适应自动跳转样式,修改样式,圆角,边框,背景,颜色等 2、使用说明 引入: <script src="./js/sliderVerif.js"></script> 4、可用方法 重置方法 : reset() 更新样式方法 : upStyle() ,屏幕变化,会导致px...
本仓库是iOS端的weex富文本组件。本质上是一个UITextView,用于将HTML字符串解析成NSAttributedString。
shape实现控件圆角,背景,边框等属性
java对图片改变大小,png防止变黑,加圆角 圆角外透明
源码DDBackgroundView,DDBackgroundView是一个适用于iOS和OS X的开源项目,可以满足你对背景设计的多种想象,比如颜色、渐变、边框以及圆角等等。 测试环境:OS X 10.7以上 A View (for ios and osx) that can ...
WPF/C#中的ListView、ListBox的背景样式、 选中行样式,可自定义选中行项的背景颜色、圆角、方形等任意形状的背景以及前景色!以ListView为例说明,使用时如下: ...