在 css3出现之前,给一个容器做一个渐变效果的一般做法是 切一张背景图做循环,然而,CSS3的到来,我们可以通过 CSS 来实现,告别图片。
以下就说说不同浏览器实现渐变的方法:
Webkit是第一个支持渐变的浏览器内核(包括 chrome 和 safari ,还有各种webkit内核的浏览器),它使用下面的结构:
语法:
background-image:-webkit-gradient(type,x1 y1,x2 y2,from(开始颜色值),to(结束颜色值),[color-stop(偏移量小数,停靠颜色值),...]);
变量解释:
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%);
原文作者: 岁月如歌
原文地址: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,混乱的世界啊,真真的与浏览器斗,乐趣全无!
虽然沮丧悲情愤,但分析研究的工作还是得继续:
一些在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
有过一些编程基础的童鞋应该知道这两个 或运算符 和 与运算符,
一般的用法如下:
//与运算符用法 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的适用范围其实很广泛,例如在遇到下面途中布局的时候:
在这里的需求是 元素蓝色元素里面的高度不确定,要求做到 这些模块在页面上居中显示,并且垂直居中。处理这个的时候,我们就需要用到 inline-block了
现代的浏览器都支持inline-block,只有IE6、IE7不支持 inline-block,不过可以通过样式 display:inline; zoom:1;进行模拟;
以下是 inline-block的兼容代码:
.box{display:inline-block; *display:inline; *zoom:1;}
如有疑问or建议可通过以下方式跟我取得联系.
Q Q: | 373435871 |
---|---|
Email: | jackness1208@gmail.com |