NiftyCube——轻松实现圆角边框

2016-02-19 10:47 13 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

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

上一篇：配置 SQLServer2005 以允许远程连接
下一篇： Win8.1技巧：卸载IE11浏览器必备方案

看过《NiftyCube——轻松实现圆角边框》的人还看了以下文章更多>>

CSS3教程(2):网页边框半径和网页圆角

标签： Web开发

页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。跨浏览器兼容性就像在上一篇《CSS3教程:什么是CSS3》中提到的，并不是所有的浏览器支持CSS3，但是那些比较好的浏览器选择兼容，而不是直接支持。我们有两个能使用的前缀。前缀： -moz...

非常简单的jQuery实现网页图片圆角

标签： Web开发

W3C很早就已经在CSS 3 中加入了圆角属性，但是由于某些流行浏览器的不支持，使得其还是没能被广泛使用，所以我们会想尽办法去进行更好的补充，包括背景图片的圆角实现、js圆角实现等等。但是这些方法在实现的过程中，总是会增加很多无谓的工作任务，而且还有可能无法做到浏览器之间的兼容性，那么就介绍一个非常简单的jQuery圆角实现效果吧...

CSS教程：一张图片实现圆角

标签： Web开发

一张图片就能实现圆角？是什么样的图片？怎样实现？其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片：，太小了是吧，不过已经够了。基本思路准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。图片示意：代码实现 XHTML代码： div ...

用js实现的抽象CSS圆角效果!!

标签： 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: ...

CSS教程:纯CSS实现的圆角化图片

标签： Web开发

在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？答案是肯定的，下面看看它的终极功夫。还是先看最终效果图吧：图一看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的效果，...

查看更多精彩>>