来源：http://blog.nixternal.com/2009.06.19/css-border-radius/
CSS3的圆角支持，不同浏览器有不同的css属性实现。偶个人最喜欢Opera ，它是严格按照标准css3属性实现的。
属性详单：
FireFox（火狐浏览器，FF）:
/* 5px四角全部是圆角 */
-moz-border-radius: 5px;
/* 5px左上、右下角的圆角
注： 四个值代表从左上角顺时针方向的各个角 */
-moz-border-radius: 5px 0 5px 0;
/* 5px坐下，右上角的圆角 */
-moz-border-radius: 0 5px 0 5px;
/* 5px左上圆角*/
-moz-border-radius-topleft: 5px;
/* 5px左下圆角 */
-moz-border-radius-bottomleft: 5px;
/* 5px右上圆角 */
-moz-border-radius-topright: 5px;
/* 5px右下圆角*/
-moz-border-radius-bottomright: 5px;
继续阅读~
评论(1)
png图片（据说无损）压缩工具PNGGauntlet, 官方网站：http://benhollis.net/software/pnggauntlet/。
偷懒，引用自：http://witmax.cn/pnggauntlet.html，其博客还介绍了结合使用PNGGauntlet和JPEGImager的教程。
软件介绍：
PNGGauntlet是一个.NET程序，通过Ken Silverman的PNGOUT命令行工具来优化PNG文件。现在流行的图像编辑软件像Photoshop、Fireworks制作的PNG文件都不能做到容量最小的。PNGGauntlet能够去除掉PNG文件中多余的数据，而且过程不造成任何图像损伤，只是减少文件大小。你只要选择你想要优化的文件，选择输出路径，点击Optimize（优化）按钮后即可搞定压缩。PNGGauntlet同样可以用来转换JPG,GIF,TGA,PCX和BMP文件为PNG文件。
继续阅读~
参与评论~
jCuteForm插件，针对单选、多选、下拉框的一个替代美化插件。jCuteForm实际上是3个插件的组合，可以分别拿出来使用，它们是： jRadio, jCheckbox, jSelect。
而且不同于其他一些美化插件的工作原理，是对现有的<radio />,<select />等标签进行拆解，内容再封装，生成div模拟的方式，外观定制有些繁琐，而且比较难调控。本插件跳过这几步，依旧遵循ToFishes系列插件结构，表现，行为相分离的原则，结构自定（提供的Demo使用em，a等标签，只是需要一些class等给插件提供参考点，即使是这些class也可以自定），外观由前端人员根据结构自定预先写好，之后调用jCuteForm实现功能。
继续阅读~
评论(5)
今天给一个同事简单讲如何去把一个psd效果图实现为一个html网页。很自然的就总结出了自己是如何过来的。
应该是水到渠成了吧。从3年多前开始由 阿捷 （可惜无缘其人）的《XHTML+CSS经典重构教程》入门，很感谢他对w3c标准的推广，以致于偶从一个dw表格布局都不熟悉，直接开始了手写XHTML+css的路程。
而js方面也是，当偶2年前知道jQuery的时候，以致于偶从一个js不熟悉的情况下，直接用jQuery实现了很棒的效果。
前端暂时应该还没有大学专业课程学习的吧。而偶的成长完全是在工作中大量实践、应用起来的。
因此，偶深深的觉得：没有不会的，只有不用的。工作是最好的学习课堂。不会很多东西没关系，只要能跟随工作的需要一步步提高就行了。
学习css和jQuery，一是《XHTML+CSS经典重构教程》+CSS手册，二是来源于网络的jQuery15天教程+jQuery手册。由此，偶另外的一个经验就是：知道如何用，知道啥能用。
继续阅读~
参与评论~
偶然被同事引发的研究（他在做一个透明背景，问了偶），如何设置透明背景。貌似游戏类网站最多这种应用。
透明背景可以是纯色，也可以是背景图，偶只用纯色测试了。
大概思路：由于透明会继承到子元素，从而不能达到满意效果，故写一个冗余标签p，设置背景透明，然后将其绝对定位，并置于内容层之下，达到背景透明的目的。
继续阅读~
参与评论~
RT…
安逸啊，安逸！很符合Nature的感觉。。不过，这个图也够大的了（这个vps限流量的，在未知的情况下，还是少点流量的好）
看图：
继续阅读~
参与评论~
发布了jTabView插件，看着代码好像很复杂，原理却很简单，其他的功能都是围绕这个做的扩展。
如果不需要那么复杂的功能，用起来倒是杀鸡用牛刀了，而且代码也不简洁。以下就是核心实现代码，做了一个简单tab插件。
/* 简单选项卡插件 */
;(function($){
$.fn.TabSimple = function(c){
c = $.extend({
tab: ".s-tab", //标题项
con: ".s-con", //内容项
curr: "curr", //当前高亮的css类名
event: "click" //触发的事件，jQuery所支持的所有事件
},c);
return this.each(function(){
var tab = $(this).find(c.tab);
var con = $(this).find(c.con);
tab.bind(c.event, function(){
var i = tab.index($(this));
tab.removeClass(c.curr); //或tab.find("." + c.curr).removeClass(c.curr)
$(this).addClass(c.curr);
con.hide().eq(i).show();
});
});
};
})(jQuery);
HTML结构自定义了，跟ToFishes系列jQuery插件 – jTabView选项卡式浏览所述一致。
2010-10-14，Release Update V2：
;(function($){
$.fn.jTabSimple = function(c){
c = $.extend({
tab: ".tabs li", //标题项
con: ".tab-con", //内容项
curr: "curr", //当前高亮的css类名
index: 1, //默认显示的tab
remote: false, //远程加载
loading: null, //自定义loading的提示html片段
event: "click" //触发的事件，jQuery所支持的所有事件
},c);
return this.each(function(){
var tab = $(this).find(c.tab);
var con = $(this).find(c.con);
var index = tab.index(tab.filter("." + c.curr)) + 1;
if(index == 0)
index = c.index;
tab.bind(c.event, function(){
var i = tab.index($(this));
return toggle(i);
});
function toggle(i){
tab.removeClass(c.curr).eq(i).addClass(c.curr);
if(c.remote){
var loading = c.loading || '<div class="loading"></div>';
con.html(loading);
$.get(tab.eq(i).find("a").attr("href"), function(ret){
con.html(ret);
});
return false;
} else {
con.hide().eq(i).show();
}
};
toggle(index - 1);
});
};
})(jQuery);
继续阅读~
参与评论~
这个插件相对来说灵活性一般，而且js对html有些地方侵入操作，工作中针对UI效果图开发的。
看下截图：
因为灵活性不高，除非对css比较熟悉，所以这里放出完整的html结构，css样式定义。
继续阅读~
参与评论~
早在工作中，写一些图片列表时候就有的这种感觉。怎么写的呢？一个li，里面img左浮动，其他内容不变，即可形成左侧缩略图，右侧描述信息的样子，看这个图：
左右两栏内容图例
结构类似于<img /> <div>introduction</div>，如果在firebug下看，可以发现div区域是包括img区域的，但是内容会环绕图片。div不设置宽度，此时div是和父级元素（li）是一样宽度的。一次偶然我随手给div加了个overflow:hidden,发现div覆盖区域适应了内容宽度，不再包含img区域了。然后用zoom:1的设置使IE也达到此效果。IE6有点瑕疵，div和img会有空白相隔。
而本文就是来源于此发现，从而很容易的实现3栏布局：两侧栏固定宽度，中间自适应宽度。无需其他说明，看代码就一切明了了。
html:
<body>
<div class="side fl">
左侧栏
</div>
<div class="main">
<div class="side fr">
右侧栏
</div>
<div class="main">
中间自适应
</div>
</div>
</body>
css:
.fl, .fr {float:left;display:inline;}
.fr{float:right;}
.side {width:200px;height:500px;background:#ccc;}
.main {height:500px;overflow:hidden;zoom:1;border:1px solid red;}
是的，就是这么简单简洁的代码，点击这里可以看到Demo。
再来一个完整页面源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>两侧固定宽度，中间自适应宽度布局</title>
<style type="text/css">
#left {float:left;width:200px;background:red}
#main, #mid {overflow:hidden;zoom:1;background:green}
#right {float:right;width:200px;background:pink}
</style>
</head>
<body>
<div id="left">left</div>
<div id="main">
<div id="right">right</div>
<div id="mid">center</div>
</div>
</body>
</html>
继续阅读~
参与评论~
linux下对文件重命名有两种命令： mv ，rename
mv很简单，move文件移动
mv /dir/file1 /dir2/file1
两个参数，第一个是源文件，第二个是目的地，如果第二个参数文件名不一样，则会重命名。
当两个参数不带目录，只有文件名时，那就是重命名了。这是单个文件的重命名。
rename arg1 arg2 arg3
rename才是真正的批量重命名命令。而且他是3个参数，不是2个。
arg1：旧的字符串
arg2：新的字符串
arg3：匹配要重命名的文件，可以使用3种通配符，*、?、[char]，*表示任意多个字符，?表示单个字符，[char]匹配char单个自定的精确字符，可以填写任意字符，foo[a]*表示只匹配fooa开头的文件名，如果一个文件是foobcc.txt，是不会被匹配的。
值的注意的是，此命令在不同的linux版本也有不同，Debian一系的操作系统别有用法。举例说明：
比如/home下有两个文件 abbcc.txt, addbb.txt , a.txt
我想把a替换为xxx，命令是这样的 ： rename “a” “xxx” *.txt
那么它会首先去匹配有哪些文件需要修改，这里凡是.txt后缀的文件都会被匹配，如果改成?.txt则只会匹配到一个文件，那就是a.txt。然后把匹配到的文件中的a字符替换为xxx，注意测试时abab.txt这样的，只会替换第一个a，有待再了解。
说到Debian一系的操作系统，比如Ubuntu，这个命令这样使用是不对的，报错，向下面这样的：
Bareword “a” not allowed while “strict subs” in use at (eval 1) line 1.
经过Google之后发现有这样的说法：
On Debian-based distros it takes a perl expression and a list of files. you need to would need to use:
rename ‘s/foo/foox/’ *
这里是一个perl表达式，好理解点说就是综合了前两个参数为1个，这样就只需要2个参数，而非上面所说的3个参数形式。
所以在Ubuntu下执行上面举例的重命名时，命令是这样的：rename ‘s/a/xxx/’ *.txt
由于没有深入应用，今天是群里有人问了，于是自己动手实践了一下，总结上面简单的用法，也算以备后忘吧。
继续阅读~
评论(1)
