-
CSS3 线性渐变介绍
2011年08月31日
在 css3出现之前，给一个容器做一个渐变效果的一般做法是 切一张背景图做循环，然而，CSS3的到来，我们可以通过 CSS 来实现，告别图片。
以下就说说不同浏览器实现渐变的方法：Webkit
Webkit是第一个支持渐变的浏览器内核(包括 chrome 和 safari ，还有各种webkit内核的浏览器)，它使用下面的结构：
语法：
background-image:-webkit-gradient(type,x1 y1,x2 y2,from(开始颜色值),to(结束颜色值),[color-stop(偏移量小数，停靠颜色值),...]);
变量解释:
- -webkit-gradient: 是background的一个属性值;
- type: webkit内核的Linear Gradients (线性渐变) 第一组参数type（类型）为 linear；
-
x1 y1,x2 y2: 为线性渐变的开始点坐标和结束点坐标。x1,x2,y1,y2 的取值范围为 0% – 100%，当x1,x2,y1,y2取值为极值的时候，x1,x2 可以取值 left (0%) 或者 right (100%);同理y1,y2可以取值top (0%) 或者 bottom (100%);
- 当 x1 == x2, y1 != y2,实现垂直渐变,调整 y1,y2的值可以调整渐变半径大小；
- 当 y1 == y2, x1 != x2,实现水平渐变,调整 x1,x2的值可以调整渐变半径大小；
- 当 y1 != y2, x1 != x2,实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
- 当 y1 == y2, x1 == x2,实现无渐变，取from的色值，即 “from(颜色值)”
- 实现垂直渐变和水平渐变渐变时，x1和x2可以最简单的取值是left（0%）或right（100%）,y1和y2可以最简单的取值是top（0%）或bottom（100%）；
- from(开始颜色值):渐变开始颜色值；
- to(结束颜色值):渐变结束颜色值；
- [color-stop(偏移量<小数>,停靠颜色值),...]：可以使用多个color-stop，如果渐变只有2个颜色，那么可以不使用该参数；偏移量必须为小数，如果偏移量>=1,那么该color-stop相当于无效；
-
纯css实现元素跨浏览器的固定定位
2011年08月24日 -
最佳默认字体(转)
2011年08月24日原文作者： 岁月如歌
原文地址：http://lifesinger.wordpress.com/2011/04/06/best-web-default-fonts/最近淘宝网首页有个小小的 默认字体调整风波，中文默认字体远比我们想象中的复杂。以前主要关注 font-family 自身，忽略了 lang 属性和 charset 设置。今天做了个更详尽的测试：
http://lifesinger.github.com/lab/2011/default-fonts/
在不同操作系统下，用各个浏览器打开，特别是 Firefox 和 Opera，混乱的世界啊，真真的与浏览器斗，乐趣全无！
虽然沮丧悲情愤，但分析研究的工作还是得继续：
- lang, charset 和 font-family 都会对默认字体产生影响，规律很复杂。
- 浏览器偏好里的字体设置，对默认字体有直接影响，比如 WebKit 内核的 Chrome 浏览器。
- 宋体转成 “\5b8b\4f53″ 也不能通吃所有浏览器。比如在 Mac OS 的 Chrome 中，只认识 simsun.
宋体其实是 serif 有衬线字体，后面跟 sans-serif, 逻辑上是错的。（修正：并没有规定前面的 font name 要和最后的 general family 保持一致）- 不同操作系统下，各个浏览器默认的 sans-serif 中文字体，一般都是最佳选择或用户已调整为最佳，不能强制用户都用宋体。
-
修复 ie9 sans-serif 字体bug
2011年08月24日一些在ie9出现之前就已经开发完成的项目中，在ie9下常常会见到一些灵异的事件如下图：
ie9下：
其他浏览器：
这个的产生是由于ie9对 sans-serif 字体的兼容性不好而导致的；
下面是出现问题的 html代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>ie9文字bug</title> <style type="text/css"> *{ margin:0; padding:0;} .txtbox{ display:block; width:200px; height:35px; margin:50px auto; font:12px/35px sans-serif; text-align:center; background:#e5f9ff; border:1px solid #b8efff; } </style> </head> <body> <div class="txtbox">这里是的博客</div> </body> </html>bug触发条件：页面编码为 非 utf-8 并且字体设置了 font-family:sans-serif;
典型例子：http://www.hltm.cc -
“||” 和 “&&” 的高级运用
2011年08月23日有过一些编程基础的童鞋应该知道这两个 或运算符 和 与运算符,
一般的用法如下：
//与运算符用法 if(i < 10 && i > 0){ //代码部分 } //或运算符用法 if(i < 0 || i > 10){ //代码部分 }以上是这2个运算符的一般用法，就是用来表示判断，我想介绍的这2个运算符的一些稍微高级用法，首先，我举一个例子：
var a = 2||3; alert(a);//2 var b = 2&&3; alert(b);//2
拿 “||” 来作说明
由于 “||” 的优先级比 “=” 高，所以优先处理 “||”运算；
由于 javascript 语言的特性， “2||3” 返回的并不是 布尔值 true 或者 false，而是 对比的那2个对象的其中一个，例如这个例子，或运算符首先判断 “||” 左边的 值是否为非空 或者 非0，如果是的话，a = 第一个值，否则，取 “||”右边的值。
-
去掉 inline-block 元素之间的空隙
2011年08月22日inline-block的适用范围其实很广泛，例如在遇到下面途中布局的时候:
在这里的需求是 元素蓝色元素里面的高度不确定，要求做到 这些模块在页面上居中显示，并且垂直居中。处理这个的时候，我们就需要用到 inline-block了
现代的浏览器都支持inline-block，只有IE6、IE7不支持 inline-block，不过可以通过样式 display:inline; zoom:1;进行模拟;
以下是 inline-block的兼容代码：
.box{display:inline-block; *display:inline; *zoom:1;} -
纯CSS制作带小三角提示框
2011年08月21日 -
HTML5 在实际项目中的应用：使标签更具语义化
2011年08月20日
