NiftyCube——轻松实现圆角边框

实在是太方便了,只要一句话,就能让目标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

(0)

相关推荐

  • NiftyCube——轻松实现圆角边框

    实在是太方便了,只要一句话,就能让目标div变成圆角,就像这样 复制代码 代码如下: <script type="text/javascript" src="niftycube.js"></script> <script type="text/javascript"> window.onload=function(){ Nifty("div#content,div#nav"); } <

  • js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)

    本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果.实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js+css实现的圆角边框TAB选项卡滑动门代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • Android实现圆角边框对话框的方法

    前言 最近要实现个圆角边框的对话框设计图,查了网上很多种实现,都差不多,从中得到灵感,实现了另一种方式,利用layer-list: 先来看看实现的效果如下: 首先在drawable目录下定义好圆角背景文件dialog_corner_bg.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/r

  • jquery插件corner实现圆角边框的方法

    本文实例讲述了jquery插件corner实现圆角边框的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • Android布局实现圆角边框效果

    首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml.shape_corner_up.xml和shape_corner.xml,分别是下面两个角是圆角边框,上面两个角是圆角边框,四个角全部是圆角边框. shape_corner_down.xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=&

  • Android编程实现圆角边框布局效果的方法

    本文实例讲述了Android编程实现圆角边框布局效果的方法.分享给大家供大家参考,具体如下: 这里用的是TableLayout布局的.先看效果图 下面看下布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android" android:layout_width=&

  • Android 圆角边框的实现方式汇总

    首先我将贴出几种实现圆角边框的dmeo程序效果图: 方式一:使用shape元素填充背景,设置圆角/带弧度的角 1.首先在 \res\drawable下新建Shape为根元素的资源文件:corners_bg.xml, 代码如下: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android&quo

  • Android编程实现圆角边框的方法

    本文实例讲述了Android编程实现圆角边框的方法.分享给大家供大家参考,具体如下: 设置边框圆角可以在drawable-mdpi目录里定义一个xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="

  • flutter Container容器实现圆角边框

    本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下 在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 Container( margin: EdgeInsets.only(left: 40, top: 40), //设置 child 居中 alignment: Alignment(0, 0), height: 50, width: 300, //边框设置 decoration: new BoxDecoration

  • 基于mootools的圆角边框扩展代码

    JQuery下面有个扩展是用纯JS生成的圆角,不过和DIV+CSS拼出来是一样的道理,圆角看上去都比较粗糙. 用背景图片要好看得多,问题是不能拉伸,最简单做法就是用四个角小图片加边框拼出来.不过这样多出N多图片,一堆乱七八糟的代码,相当不爽. 有一个很有技巧的方法,用一张大图片+CSS来做,原理如下.  用一张大的背景图片做圆角,用CSS分别取四个角和边再拼成一个DIV.这样不仅可以解决圆角,还可以生成其它特殊的边框(比如阴影). 但是每次使用都要加CSS也很不爽,于是用mootools写了一个

随机推荐