关闭

不用css样式表和背景图片实现圆角矩形,超简洁!

标签: css搜索引擎functiondiv
2661人阅读 评论(0) 收藏 举报

当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的。其中之一就是圆角矩形的实现。

在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片;另一种是用背景图像实现。但是,不管是哪一种,都有一个共同的缺点:需要使用很多代码来嵌套,而这些代码对搜索引擎来说毫无意义。

在《css cookbook》一书中介绍了一种实现圆角矩形十分简洁的方法,那就是用Nifty Corners Cube

先看一个简单的例子:http://www.sz137.com/sz137/demo1.html

查看源码发现实现圆角矩形的代码:
  1. <script type="text/javascript" src="niftycube.js"></script>
  2. <script type="text/javascript">
  3. window.onload=function(){
  4.   Nifty("div#box","big");
  5. }
复制代码
如此简单!当页面圆角矩形很多的时候这种简洁就更显而易见了。

下面具体介绍Nifty Corners Cube的使用:

Nifty Corners Cube(以下简称Nifty)是基于GNU GPL licence的自由软件,整个程序代码不过10KB,包括一个JS文件和一个CSS文件。使用Nifty不需要背景图片,它会自动根据你的背景颜色匹配出圆角。使用Nifty会用到两组参数:第一组是CSS选择符(CSS Selector),用来指定哪些单元(elements)需要改成圆角矩形;第二组是Nifty提供的内部参数,用来定义圆角样式,方位等。

第一组参数可以是:



这里需要注意的是,若你的导航栏使用div标签,CSS选择符是#head .navigation时,参数的写法应该是div.navigation。

第二组参数:



下面看一些例子:

1.同时作用于两个层:
示例:http://www.sz137.com/sz137/demo2.html
实现代码:
  1. Nifty("div#content,div#nav");
复制代码
2.与背景图片完美结合:
示例:http://www.sz137.com/sz137/demo3.html
实现代码:
  1. Nifty("div#box","transparent");
复制代码
3.圆角导航栏:
示例1:http://www.sz137.com/sz137/demo4_1.html
实现代码:
  1. Nifty("ul#nav a","small transparent top");
复制代码
示例2:http://www.sz137.com/sz137/demo4_2.html
实现代码:
  1. Nifty("ul#nav a","top");
复制代码
4.圆角按钮:
示例:http://www.sz137.com/sz137/demo5.html
实现代码:
  1. Nifty("ul#nav a","small transparent top");
复制代码
5.右上角不要圆角,固定高度:
示例:http://www.sz137.com/sz137/demo6.html
实现代码:
  1. Nifty("div#about li","tl bottom big fixed-height");
复制代码
6.same-height属性:
示例:http://www.sz137.com/sz137/demo7.html
实现代码:
  1. Nifty("div#content,div#nav","same-height");
复制代码
其它示例:
http://www.sz137.com/sz137/demo8.html
http://www.sz137.com/sz137/demo9.html
http://www.sz137.com/sz137/demo10.html
http://www.sz137.com/sz137/demo11.html
http://www.sz137.com/sz137/demo12.html
http://www.sz137.com/sz137/demo13.html

下载地址:
http://www.sz137.com/sz137/NiftyCube.rar
欢迎转载!
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Css暴力绘制圆角矩形

Css3.0中有border-radius;属性可以绘制,当圆角设置为整个border一半大小的时候,还可以画出圆和椭圆。 这里讲一下一种暴力绘制的思路 其实方法很简单,圆角矩形和普通矩形的区别主...
  • u011718707
  • u011718707
  • 2016-08-16 11:15
  • 264

不使用border-radius实现圆角框

原文:基本的圆角框 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。从上面效果图中我们可以看到其实这种圆角框是靠一个个容...
  • cindy_rain
  • cindy_rain
  • 2015-11-20 20:49
  • 1225

尝试在ie8上实现纯css的圆角

纯css实现在ie8下的圆角 本文可以说几乎没有什么
  • ljx1044680698
  • ljx1044680698
  • 2014-11-25 00:05
  • 3044

CSS3黑科技 - 内凹圆角

CSS3 黑科技 - 内凹圆角 - 径向渐变实现圆角,大家一定都会做,border-radius, 内凹圆角如何实现?可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,...
  • qq_16415157
  • qq_16415157
  • 2016-10-14 21:02
  • 4337

CSS3:垂直居中&圆角矩形

1.如果垂直居中vertical-align:middle;不起作用的话,可以考虑让显示的内容以表格的形式显示。代码如下: #content{ width: 300px; heigh...
  • luohuaxinyue
  • luohuaxinyue
  • 2015-12-28 11:55
  • 1006

简洁型css圆角矩形

.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{h...
  • aefefafaf
  • aefefafaf
  • 2013-06-17 19:36
  • 380

CSS学习(六)-css圆角边框高级效果、边框阴影效果(上)

一、理论: 1.border-radius: a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示 b.圆形:元素的宽度和高度相同,圆角的半径...
  • bwshqh
  • bwshqh
  • 2016-03-04 01:05
  • 1647

C#绘画圆角矩形的两种方式

最近在用C#进行编程,重写CheckBox,需要绘画圆角矩形,在网上查找了许多资料,用C#FillPath的方式绘画总感觉太麻烦,需要算坐标,不如直接调用C++的方法绘画圆角矩形。 声明:本代码借鉴网...
  • xaq693888265
  • xaq693888265
  • 2017-01-13 14:04
  • 274

CSS3基础第一篇(圆角,阴影,渐变,选择器)

1.border-radius:1px 2px 3px 2px;  /*添加圆角  四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */  2.box-shadow:0px 0px 1...
  • leiwen_su
  • leiwen_su
  • 2016-04-27 09:02
  • 1551

html5 Canvas画图10:圆角矩形

本文属于《html5 Canvas画图系列教程》 上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。 一个正常的圆角矩形,...
  • happyrabbit456
  • happyrabbit456
  • 2017-02-14 15:34
  • 505
    个人资料
    • 访问:6215639次
    • 积分:60019
    • 等级:
    • 排名:第55名
    • 原创:332篇
    • 转载:1719篇
    • 译文:19篇
    • 评论:178条
    博客专栏
    网上乐园
    最新评论