NiftyCube——轻松实现圆角边框

2016-02-19 10:47 15 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享NiftyCube——轻松实现圆角边框教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发 】

实在是太方便了,只要一句话,就能让目标div变成圆角,就像这样
代码如下:

script type="text/javascript" src="niftycube.js"/script
script type="text/javascript"
window.onload=function(){
Nifty("div#content,div#nav");
}
/script

这句话的意思就是使id为content和nav的div变成圆角

demo:http://www.healdream.com/upload/html/NiftyCube/nifty2.html
当然这只是其中的一种应用,还有很多高级的应用,这里就不细说了

down:http://www.51files.com/?SDHTE021602MRNFL5BWE

来源:http://www.tulaoshi.com/n/20160219/1595749.html

延伸阅读
标签: Web开发
有时候我们需要一个链接看上去像按钮,所以就需要用到block属性,如果要几个按钮并排或者需要和其他文字混排的时候,inline-block就可以很好的解决这个问题。 只是不是所有人都响应了Mozilla的号召把Firefox升级到了3.0。遗憾的是,Firefox2不支持这个属性。网上查了一下,似乎有很多种建议方案,但是只有一个叫-moz-inline-stack的属...
标签: Web开发
W3C很早就已经在CSS 3 中加入了圆角属性,但是由于某些流行浏览器的不支持,使得其还是没能被广泛使用,所以我们会想尽办法去进行更好的补充,包括背景图片的圆角实现、js圆角实现等等。但是这些方法在实现的过程中,总是会增加很多无谓的工作任务,而且还有可能无法做到浏览器之间的兼容性,那么就介绍一个非常简单的jQuery圆角实现效果吧...
标签: Web开发
一张图片就能实现圆角?是什么样的图片?怎样实现? 其实这张图片是一个小圆圈,如下面的例子将要使用的图片为 10 * 10 大小的图片: ,太小了是吧,不过已经够了。 基本思路 准备四个小容器,分别放小圆圈图片的左上、右上、左下、右下四个部分,然后再分别定位到父容器的四个角上。 图片示意: 代码实现 XHTML代码: div ...
标签: Web开发
大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: html head titlecss圆角效果/title meta http-equiv="content-type" content="text/html; charset=gb2312" style type="text/css" div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: ...
标签: Web开发
在前面一篇文章中,我们将一张上下渐变的的图片作为标题的背景,并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢?我们还能将一些颜色比较丰富的图片也进行透明圆角化吗? 答案是肯定的,下面看看它的终极功夫。 还是先看最终效果图吧 : 图一 看到了吧,这就是用纯CSS实现的圆角化图片,为了能看到透明化的效果,...

经验教程

138

收藏

28
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部