认识CSS3和HTML5
|
CSS3教程:background-clip和background-origin
background-clip 和 background-origin 是 CSS3 中新加的 background module 属性,用来确定背景的定位。
background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。
语法为:
background-clip: [border | padding] [, [border | padding]]*
background-origin: [border | padding | content] [, [border | padding | content]]*
对于 background-clip:
如果是 padding 值,则 background 忽略 padding边缘,border 是透明的。如果是 border 值,则background 包括 border 区域。如果 background-image 图片有多个,对应的 background-clip 值之间用逗号分隔。
对于 background-origin:
如果是 padding 值,则 position 相对于 padding 边缘("0 0" 为 padding 边缘的左上角,而 "100% 100%" 为右下角)。如果是 border 值,则意味着相对 border 边缘。而 border 值则相对于内容边缘。与 background-clip 相同,多个值也用逗号分隔。如果 background-clip 是 padding 值,background-origin 是 border 值,并且 background-position 是 "top left"(默认初始值),则背景图左上角将会被截取掉部分。
这两个属性仅从 CSS3 才出现,在未使用该属性 background module 中的默认表现又如何呢?
background-clip 默认类似于 background-clip:border。
background-origin 默认类似于 background-origin:padding。
但 IE 又是特例 (It sucks)。
在 IE6 、IE7 中,一般元素(button 等除外)的背景相当于:background-clip:border; background-origin:border;
而 hasLayout 的元素(加上 button 等)的背景则相当于:background-clip:padding; background-origin:padding;
这一对 CSS3 属性已在 Mozilla, Safari 3 和 Konqueror 等浏览器中实现,不过都是通过其私有属性的表达方式。
引用:
基本非 IE 的浏览器的私有属性一般都会以 -xxx- 这样开始,-o-就是以 Presto 为引擎的 Opera 私有的、-icab- 是 iCab 私有的,-khtml- 是以 KHTML 为引擎的浏览器(如 Konqueror Safari)、-moz- 就是以 Mozilla 的 Gecko 为引擎的浏览器(如Firefox,Mozilla)、-webkit- 就是以 Webkit 渲染引擎(是 KHTML 的衍生产品)的浏览器(如 Safari、Swift)。
即支持的私有属性分别为:
moz-background-clip
webkit-background-clip
khtml-background-clip
moz-background-origin
webkit-background-origin
khtml-background-origin
下面举个运用 background-origin 属性的简单例子,效果如下图:
运行代码框
<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>background-clip 与 background-origin 的一则运用</title>
<style type="text/css">
button{
display:inline-block;/*触发hasLayout*/
height:26px;
padding:0 20px;
cursor:pointer;
*overflow:visible;/*消除IE按钮左右padding随字数长度变化的BUG*/
border:3px double #95071b;/*用3px 双边来模拟设计图中的白线*/
border-right-color:#650513;
border-bottom-color:#650513;
background-color:#95071b;
/*设置背景裁切方式和参考线*/
-moz-background-clip:padding;
-webkit-background-clip:padding;
-khtml-background-clip:padding;
-moz-background-origin:padding;
-webkit-background-origin:padding;
-khtml-background-origin:padding;
/*向前兼容*/
background-clip:padding;
background-origin:padding;
color:#fff;
font-size:12px;
line-height:20px;
/*修正IE6下高度问题*/
_padding-top:2px;
_line-height:14px;
}
</style>
</head>
<body>
<h1>background-clip 与 background-origin 的一则运用</h1>
<ul>
<li>兼容:IE6、IE7、Firefox2+、Firefox3+、Safari、Konqueror </li>
</ul>
<p><button>这里是按钮,是钮不是妞</button></p>
<p>Designed by:<a href="http://www.planabc.net" title="PlanABC-怿飞's Blog"> 怿飞</a></p>
</body>
</html>
HTML 部分:
<button>这里是按钮,是钮不是妞</button>
CSS 部分(详细见注释):
button {
display:inline-block;/*触发hasLayout*/
height:26px;
padding:0 20px;
cursor:pointer;
*overflow:visible;/*消除IE按钮左右padding随字数长度变化的BUG*/
border:3px double #95071b;/*用3px 双边来模拟设计图中的白线*/
border-right-color:#650513;
border-bottom-color:#650513;
background-color:#95071b;
/*设置背景裁切方式和参考线*/
-moz-background-clip:padding;
-webkit-background-clip:padding;
-khtml-background-clip:padding;
-moz-background-origin:padding;
-webkit-background-origin:padding;
-khtml-background-origin:padding;
/*向前兼容*/
background-clip:padding;
background-origin:padding;
color:#fff;
font-size:12px;
line-height:20px;
/*修正IE6下高度问题*/
_padding-top:2px;
_line-height:14px;
}
不足之处:此效果在 Opera 下无法实现。
当然这只是一种对 HTML 代码有洁癖的解决方法(限于对 background-clip 和 background-origin 属性的学习和理解),当然也可尝试其他方法,也许会使 CSS 更简洁,至于各种方法的优缺点自己衡量。
细说CSS3中的选择符
英文原文:
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
中文翻译:
http://www.dudo.org/article.asp?id=197
注:本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注]
在2005年的9月和10月,我先后发表了几篇关于CSS2.1中选择符的介绍文章。大体看来那几篇文章中介绍过的大部分选择符都已经可以在像Mozilla/Firefox,Safari和Opera等现代浏览器中使用了。我们现在要做的就是等待Internet Explorer尽快赶上来,那我们就可以尽情地使用CSS2.1中的选择符了。好在Internet Explorer在其第7个版本中已经在尽力追赶了,至少在某些扩展方面。
如果我们再向前看一点,在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。CSS3中的很多选择符已经在现代浏览器中得到很好的应用(IE8.0中也已经部分地支持了CSS3,dudo注),但是这些基本功能上的支持还远远不能满足开发者使用的要求。但是在某些情况下使用他们可以带来很好的超前体验,因此我认为了解一下CSS 3新增选择符是如何使用还是有益处的。
本文中对选择符描述主要是参考了《2005年12月15日W3C制定的选择符草稿》。草稿中讲到的新的选择符可能会在CSS的第3个版本中出现,但是也可能会出现在其他语言中。如果你是几个月前甚至是几年前读过这篇草稿,那么现在你应该再去看一下是不是已经出现了最新版本了。
这里我不打算去解释CSS选择符工作的基本原理。如果你想重要复习一下的话,最好从《细说CSS2.1中的选择符》开始。
首先,快速浏览一下CSS3中新增的选择符:
CSS3选择符语法概览:
选择符类型 |
表达式 |
描述 |
子串匹配的属性选择符 |
E[att^="val"] |
匹配具有att属性、且值以val开头的E元素 |
子串匹配的属性选择符 |
E[att$="val"] |
匹配具有att属性、且值以val结尾的E元素 |
子串匹配的属性选择符 |
E[att*="val"] |
匹配具有att属性、且值中含有val的E元素 |
结构性伪类 |
E:root |
匹配文档的根元素。在HTML中,根元素永远是HTML |
结构性伪类 |
E:nth-child(n) |
匹配父元素中的第n个子元素E |
结构性伪类 |
E:nth-last-child(n) |
匹配父元素中的倒数第n个结构子元素E |
结构性伪类 |
E:nth-of-type(n) |
匹配同类型中的第n个同级兄弟元素E |
结构性伪类 |
E:nth-last-of-type(n) |
匹配同类型中的倒数第n个同级兄弟元素E |
结构性伪类 |
E:last-child |
匹配父元素中最后一个E元素 |
结构性伪类 |
E:first-of-type |
匹配同级兄弟元素中的第一个E元素 |
结构性伪类 |
E:only-child |
匹配属于父元素中唯一子元素的E |
结构性伪类 |
E:only-of-type |
匹配属于同类型中唯一兄弟元素的E |
结构性伪类 |
E:empty |
匹配没有任何子元素(包括text节点)的元素E |
目标伪类 |
E:target |
匹配相关URL指向的E元素 |
UI元素状态伪类 |
E:enabled |
匹配所有用户界面(form表单)中处于可用状态的E元素 |
UI元素状态伪类 |
E:disabled |
匹配所有用户界面(form表单)中处于不可用状态的E元素 |
UI元素状态伪类 |
E:checked |
匹配所有用户界面(form表单)中处于选中状态的元素E |
UI元素状态伪类 |
E::selection |
匹配E元素中被用户选中或处于高亮状态的部分 |
否定伪类 |
E:not(s) |
匹配所有不匹配简单选择符s的元素E |
通用兄弟元素选择器 |
E ~ F |
匹配E元素之后的F元素 |
如果对上面的描述还不是很清楚的,请不要担心。本文下面的部分将会对他们进行更加详细的讲解,并且提供例子来演示他们是怎么使用的。
子串匹配的属性选择符
这一组的选择符都新加的,他允许开发者对属性中的子字符串来进行匹配。
假设HTML文档中包含下面的代码结构:
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>
通过使用子串匹配的属性选择符就可以找到文档中这些结构性的特定组合。
下面的规则将为id以“nav”开头的div元素设定背景颜色:
div[id^="nav"] { background:#ff0; }
上例中选择符会匹配div#nav-primary和div#nav-secondary。
要找到id以primary结尾的div元素,可以使用下面的规则:
div[id$="primary"] { background:#ff0; }
这时选择符将匹配div#nav-primary和div#content-primary。
下面的规则将会匹配到id中含有content子字符串的的div中:
div[id*="content"] { background:#ff0; }
受影响的元素有:div#content-primary、div#content-secondary和div#tertiary-content。
子串匹配的属性选择符已经在最新版本的Mozilla、Firefox、Flock、Camino、Safari、OmniWeb以及Opera中可以使用,但是如果IE中还不支持的话,我们最好还是先不要使用他们(作者在写这篇文章时IE还在开发中,如今IE7、IE8都支持这些选择符,dudo注)。
目标伪类
含有识别标识的url(一个#后面紧跟锚点名称或者元素的id)指向的是文档中的特定元素。链向其他目标元素的这些元素就可以使用:target伪类来修饰它。如果当前的URL中没有任何的片断识别标识,:target伪类将不会匹配任何元素。
还是以上面提到的代码结构为例,如果URL中包含content-primary标识时,现在的规则将会在他外围增加一个边框:
div#content-primary:target { outline:1px solid #300; }
URL是类似这样的形式的:
http://www.example.com/index.html#content-primary。
基于Mozilla和Safari的浏览器已经支持:target伪类。
UI元素状态伪类
:ENABLED伪类和:DISABLED伪类
在浏览器允许改变表单控件外观的前提下,:enabled伪类和:disable伪类允许开发者指定用户界面中可用和不可用元素(表单元素)的显示样式。下面的规则将会根据单行输入框是否可用设定不同的背景颜色:
input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }
:CHECKED伪类
:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。下面的CSS规则将会使选中的radio和checkbox元素显示一个绿色边框:
input:checked { border:1px solid #090; }
UI元素状态伪类目前可以在Opera和基于Mozilla的浏览器中使用。
要注意的是,许多浏览器对于开发者对表单控件样式的改变有着严格的限制。更多关于这方便的内容可以我的两篇文章:《样式化表单控件》和《样式化更多表单控件》。
结构性伪类
结构性伪类允许开发者根据文档树中表明的结构来指定元素,而这些使用简单选择符或者是混合选择符都无法做到。结构性伪类功能十分强大,但是不幸的是现代浏览器仅提供了有限的支持。
:ROOT伪类
:root伪类指向的是文档的根元素。在HTML中,文档的根元素始终是HTML,也就是说现在的两条规则其实是一样的(大体上说来:root要比html更专业点)。
:root { background:#ff0; }
html { background:#ff0; }
:NTH-CHILD()伪类
:nth-child()伪类指向的元素在文档树中有一定数量的兄弟元素存在。其中括号内的参数,可以是一个数字,也可以一个关键字或者一个公式。
数字b指是的第b个子元素。下面的规则将会应用到父元素下所有p元素中的第三个中:
p:nth-child(3) { color:#f00; }
关键字odd(奇数)和even(偶数)可以用来匹配序号为奇数或者是偶数的子元素。第一个元素的序号为1,因为下面的规则将会匹配第1、3、5...了子元素p:
p:nth-child(odd) { color:#f00; }
下面的规则则匹配第2、4、6...个字元素p:
p:nth-child(even) { color:#f00; }
表达式an+b可以用来创建更加复杂的循环模式。在表达式中,a代表步长,n是一个从0开始的计数器,b代表偏移量。其中,所有的数值都必须是整数(这里,n是从0开始的,和js等中的循环不同的是,至于到多少结束取决于元素的个数决定,如文档中有20个元素,3n(n=1,2...)就会分别选择第3、6、9、...18个元素,n此时为6 ,dudo注)。为了更好理解如何使用表达式我们先看几个代码实例:
下面的规则将会匹配序号数为3的倍数的所有p元素。在第一行中,b等于0,因此可以忽略不写(见第二行):
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
偏移量可以用来指定样式的循环是从哪个元素开始应用的。如果有一个20行的表格,我们希望从第10行以后的奇数行开始使用不同的背景颜色,就可以使用下面这条规则:
tr:nth-child(2n+11) { background:#ff0; }
由于n是从为开始的,因此第一个受影响的tr元素的序号是11(2*0+11=11,dudo注)。接下来就是第13行(2*1+11=13)再接下来就第15行(2*2+11=15),以此类推。
更详细介绍请参照CSS 3选择符中的《nth-child()伪类》。
那么,对于这样有用的一个选择符又有哪些浏览器支持它呢?很糟糕,据我所知,没有一个浏览器支持这个选择符甚至没有浏览器支持nth类的选择符。如果有的话请帮我指正(Firefox3和IE8目前是否支持?dudo)
:nth-of-type()
:nth-of-type()伪类和nth-child()伪类找使用方法十分相似,只不过他匹配的是规则中指明类型的元素。下面的规则将会匹配每个属于父元素中第三个子元素的p元素(属于第3个子元素的p在一个该当中可能会有很多,只不过他们位于不同的父元素下,dudo注):
p:nth-of-type(3) { background:#ff0; }
当你想确定是否已经指向了第三个p元素,这种方法会很有用。开始你可能觉得这和使用nth-child效果是一样的,但是nth-child(3)会把所有的子元素都计算进来,因此结果可能就会不一样,除非p所有的所有兄弟元素也都是p元素。
:nth-of-type伪类目前还没有浏览器支持。
:nth-last-of-type伪类
:nth-last-of-type伪类指向的元素在其后还有若干同类型的元素。和:nth-last-child伪类一样,它是从最后一个子元素向回数的。下面的规则将会匹配到倒数第二个兄弟元素p中(注意:是兄弟、同级别的节点):
p:nth-last-of-type(2) { background:#ff0; }
:nth-last-of-type()目前还没有浏览器支持。
:last-child伪类
:last伪类指向的是父元素中最后一个子元素。它和:nth-last-child(1)效果是一样的。下面的规则匹配所有属于父元素中最后一个子元素的p:
p:last-child { background:#ff0; }
:last-childe伪类可以在基于Mozilla的浏览器中使用。Opera不支持:last-childe伪类,在Safri中存在bug(上面的规则会匹配到所有的p元素)。令人稀奇是的它可以在OmniWeb(测试版本5.1.1)中正常使用,尽管这个浏览器是基于Safari的。这可能是因为Apple WebKit最新版本的回归,因为OmniWeb使用的WebKit通常要比Safari版本稍微低一点。
:first-of-type伪类
:first-of-type伪类指向同类型元素中的第一个元素。它和:nth-of-type(1)是一样的。
p:first-of-type { background:#ff0; }
:first-of-type伪类目前还没有浏览器支持。
:last-of-type伪类
:last-of-type伪类指向同类型元素中的最后一个元素。它和nth-last-of-type(1)是一样的。
p:last-of-type { background:#ff0; }
:last-of-type伪类目前还没有浏览器支持。
:only-child伪类
:only-childe伪类指向的是那些父元素中再没有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一样的(后者不够专业、简明)。
p:only-child { backgound:#ff0; }
:only-childe伪类目前可以在基于Mozilla的浏览器中使用。在Safari似乎被解释成了:first-child(上面的规则会被匹配到文档中所有第一个子元素p中)。
:only-of-type伪类
:only-of-type伪类指向的是那些父元素中再也没有与之类型相同的子元素。这和:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)相同(后者专业性不够)。
p:only-of-type { background:#ff0; }
:only-of-type伪类目前还没有浏览器支持。
:empty伪类
:empty伪类指向没有任何子元素的元素。其中包括text节点,因此下面的示例只有第一行是空元素。
<p></p>
<p>text</p>
<p><em></em></p>
下面的规则只匹配第一行的p元素:
p:empty { background:#ff0 }
:empty伪类目前被基于Mozilla的浏览器支持。Safari会错误地把样式应用到所有指定的元素中去。
否定伪类
否定伪类写成:not(s),参数s为简单选择符。它指向的是除简单选择所指向的元素以外的所有元素。例如,下面的CSS将会指向所有不是p的元素:
:not(p) { border:1px solid #ccc; }
否定伪类目前只有基于Mozilla的浏览器支持。
::selection伪类
::selection伪类匹配指定元素中处于选中或者高亮状态的部分。其中一个应用就是用它来控制选中文本的样式。
下面的规则会使选中的文本颜色变为红色:
::select { color:#f00; }
::selection伪类目前可能基于Safari的浏览器支持。但是在使用上会出现不可预料的情况,因此Safari还需要一点改进。基于Mozilla的浏览器要使用-moz-prefix: ::-mozi-selection来实现。这种prefix可能最终会被去掉。
通用兄弟元素选择器
通用兄弟元素选择器通过两个简单选择符通过波浪号(~)分隔组成。它匹配第二个简单选择符中所匹配的元素,而且与第一个简单选择符中匹配的元素要出现在他的前面。这两个元素必须具有同一个父元素,但是第二个元素不一定必须紧跟在第一个元素之后。这条CSS规则将会匹配所有p元素之后ul元素:
p ~ ul { background:#ff0; }
通用兄弟元素选择器目前有Opera和基于Mozilla的浏览器支持。
亟需更好的浏览器支持
部分CSS 3选择符已经被广泛支持。但是,大部分非常有用的选择符在现代浏览器中或者未被支持或者使用受到限制。这就使得本文中介绍的很多选择符在今天的Web或多或少失去了用武之地。但是不必害怕去尝试它,你仍然可以在支持他们的带来超前体验的高级浏览器中使用他们。(源码网整理:www.codepub.com)
[附件]CSS3选择符在现在浏览器(Firefox 2、Firefox 3、InternetExplorer 7、Internet Explorer 8、Oper9.27)中的支持程度(dudo验证,请指正!)
_________________IE 7________IE8________FF2_________FF3______Opera9.27
E[foo^="bar"]______Y__________Y__________Y__________Y__________Y
E[foo$="bar"] ______Y__________Y__________Y__________Y__________Y
E[foo*="bar"] ______Y__________Y__________Y__________Y__________Y
E:root____________ N__________N__________Y__________Y__________Y
E:nth-child()_______ N__________N__________N__________N__________N
E:nth-last-child()____ N__________N__________N__________N__________N
E:nth-of-type()_____ N__________N__________N__________N__________N
E:nth-last-of-type()__ N__________N__________N__________N__________N
E:last-child_________ N__________N__________Y__________Y__________N
E:first-of-type______ N__________N__________N__________N__________N
E:only-child________ N__________N__________Y__________Y__________Y
E:only-of-type______N__________N__________N__________N__________N
E:empty__________ N__________N__________Y__________Y__________N
E:target___________N__________N__________Y__________Y__________N
E:enabled_________ N__________N__________Y__________Y__________Y
E:disabled_________ N__________N__________Y__________Y__________Y
E:checked_________N__________N__________N__________N__________Y
::selection_________N__________N__________N__________N__________N
not()_____________N__________N__________Y__________Y__________Y
E ~ F_____________Y__________Y__________Y__________Y__________Y
CSS3的新特性介绍
边框:(Borders)
border-color:控制边框颜色,并且有了更大的灵活性,可以产生渐变效果
border-image:控制边框图象
border-corner-image:控制边框边角的图象
border-radius:能产生类似圆角矩形的效果
背景(Backgrounds)
background-origin:决定了背景在盒模型中的初始位置,提供了3个值,border, padding和content
border:控制背景起始于左上角的边框
padding:控制背景起始于左上角的留白
content:控制背景起始于左上角的内容
background-clip:决定边框是否覆盖住背景(默认是不覆盖),提供了两个值,border和padding
border:会覆盖住背景
padding:不会覆盖背景
background-size:可以指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定
multiple backgrounds:多重背景图象,可以把不同背景图象只放到一个块元素里。
文字效果:(Text effects)
text-shadow:文字投影,可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。
text -overflow:当文字溢出时,用"..."提示。包括ellipsis、clip、ellipsis-word、inherit,前两个CSS2就有了,目前还是部分支持,但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词,对中文意义不大,inherit可以继承父级元素。
颜色:(Color)
HSL colors:除了支持RGB眼色外,还支持HSL(色相、饱和度、亮度)。以前一般都是作图的时候用HSL色谱,但这样一来会包括更多的颜色。H用度表示,S和L用百分比表示,比如hsl(0,100%, 50%)
HSLA colors:加了个不透明度(Apacity),用0到1之间的数来表示,比如hsla(0,100%,50%,0.2)
opacity:直接控制不透明度,用0到1之间的数来表示
RGBA colors:和HSLA colors类似,加了个不透明度
用户界面(User-interface)
resize:可以由用户自己调整div的大小,有horizontal(水平)vertical(垂直)或者both(同时),或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局
选择器:(Selectors)
Attribute selectors:在属性中可以加入通配符,包括^,$,*
[att^=val]:表示开始字符是val的att属性
[att$=val]:表示结束字符是val的att属性
[att*=val]:表示包含至少有一个val的att属性
其它模块:(Other modules)
media queries:感觉叫媒体选择比较合适,可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式,以前则只能设置整个网页。
multi-column layout:多列布局,让文字以多列显示,包括column-width、column-count、column-gap三个值
column-width:指定每列宽度
column-count:指定列数
column-gap:指定每列之间的间距
column-rule-color:控制列间的颜色
column-rule-style:控制列间的样式
column-rule-width:控制列间的宽度
column-space-distribution:平均分配列间距
CSS3 有关的问题
Eric A. Meyer对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书,是 An Event Apart 的合伙创始人,A List Apart 团队成员,还是 Complex Spiral Consulting 的创始人。另外, Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家,他们负责维护和开发 CSS。
不用说,如果要找个人请教一些 CSS 方面的问题,Eric Meyer 就是那个人。本文作者日前向 Eric Meyer 提问了7个与 CSS3 有关的问题,以下是 Eric Meyer 对这些问题的解答。
你认为 CSS3 对 CSS 最令人振奋的扩展在哪里?
[Eric Meyer]: 高级选择器(advanced selectors)。诚然,透明度,圆角,多背景图都是很好的东西,但这些 Web 2.0 设计元素比起诸如指定从表格的第5行开始3的倍数行来还不是那么大不了。再比如,选择一个对象内的第一段内容,或者选择列表框中最后一个项目。
另外,Web 字体也会是很 Cool 的东西。
我们谈谈 CSS 细则中的模块化问题。CSS3 的 CSS 细则是模块化的。这将对 CSS3 的进度和被接受程度带来什么影响?
[Eric Meyer]: CSS3 不会再象 CSS2 那样有一套严密的细则,CSS3 只是一些并行出发的努力,一些快,一些慢而已。坦率地讲,我也不知道 CSS3 会被如何接受。5年前,CSS 曾一度停顿,我称之为“IE 空白期”,仅仅是最近几年,才有不少新的浏览器开始推动 CSS 的发展。
从另一方面讲,你可以争辩说那个停顿期是有益的,让浏览器厂商有时间去修复 BUG 而不是自行其事。我也赞成,但我的真实想法是,鉴于以前的状况,我们很难预测 CSS3 会被怎样接受。我觉得一些分歧导致开发的迟缓,这只是我的感觉,这也是我为什么离开 CSS 工作组的原因。我现在只是偶尔被邀请从事一些别的 W3C 工作。
刚看过 CSS 新选择器细则建议,好象 DOM 中以前大量通过 JavaScript 进行的工作都可以在 CSS 中完成。比如,你现在可以通过 CSS 选择表格的偶数行并分配特殊的式样,从而实现以前只能靠 JavaScript 实现的条纹式表格。
JavaScript 是否影响了 CSS,它们在现代 Web 设计中的作用将如何区分,它们会越来越分离还是越来越融合?
[Eric Meyer]: 据我所知,受影响最大的是一些 JS 框架,如 jQuery,它们受 CSS 的影响。不过,也有另外的一些趋势,一些 JS 中的东西也被 CSS 工作组参考。
我认为 JS 对 CSS 更大的影响是,人们使用 JS 为浏览器带来高级 CSS 功能,我最近写过这方面的文章。我们已经看到人们使用 JS 让浏览器发声,或者对一些过去的可访问性问题进行变通,通过 JS 实现 HTML5 和 CSS3 效果的日子也很快会到来。
如果我们想学习 CSS3,有那些资源可以利用?
[Eric Meyer]: http://css3.info/ 是很好的开端,那里有大量的资料。
CSS越来越庞大,越来越复杂。你觉得 CSS3 的每一次模块升级是否应使用版本号区分,如 CSS3.1, CSS3.2, 而不是象 CSS1 或 CSS2 那样?
[Eric Meyer]: 是,那是个好主意。但我并不指望这个能实现因为这不现实。你只能用那些成熟的模块,当多个模块都同时成熟的几率很低。
作为开发者和设计者,我们可以为 CSS3 的开发和采用提供什么帮助?
[Eric Meyer]: 在博客,Twitter,论坛中写文章,告诉人们你想用什么样的功能,用你自己的办法模拟这些功能,向浏览器开发商提出请求,在目前的 CSS3 中寻找 BUG。这就是我们所能对 CSS3 所起的推动作用。
CSS3的border-radius属性定义HTML元素的圆角
两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”,圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死,YAHOO Performance Research Engneer Team 的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!,从侧面也说明了圆角给实现者带来的困扰:实现麻烦、兼容困难、性能不佳。而W3C早在 2002年的CSS3草案 中就加入了一个叫 border-radius 的属性,通过它可以直接来定义HTML元素的圆角。
CSS3的border-radius规范
最新草案 中其主要信息如下:
1 属性:
border-top-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-bottom-right-radius
值:<length> <length>?。它们分别是定义角形状的四分之一椭圆的两个半径。如图:
第一个值是水平半径。
1 如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
1 如果任意一个值为0,则这个角是矩形,不会是圆的。
1 值不允许是负值。
2 属性:border-radius。它是上面四个属性值的简写。
值:<length>{1,4} [ / <length>{1,4} ]?
2 如果斜线前后的值都存在,那么斜线前的值设置水平半径,且斜线后的值设置垂直半径。如果没有斜线,则水平半径和垂直半径相等。
2 四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略,那么它等于top-right。如果bottom-right省略,那么它等于top-left。如果top-right省略,那么它等于top-left。
3 应用范围:所有的元素,除了table的样式属性border-collapse是collapse时
4 内边半径等于外边半径减去对应边的厚度。当这个结果是负值时,内边半径是0。所以内外边曲线的圆心并不一定是一致的。
5 border-radius也会导致该元素的背景也是圆的,即使border是none。如果background-clip是padding-box,则背景(background)会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
6 所有的边框样式(solid、dotted、inset等)都遵照角的曲线。如果设置了border-image,则曲线以外的部分会被裁剪掉。
7 如果角的两个相邻边有不同的宽度,那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
8 两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如,两条边宽度相同,这个点就是一个45°的角上,如果一条边是另外一条边的两倍,那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
9 角不允许相互重叠,所以当相邻两个角半径的和大于所在矩形区域的大小时,用户代理(浏览器)比如缩小一个或多个角半径。运算法则如下:f = min(Li/Si),i ∈ {top, right, bottom, left},Ltop = Lbottom = 所在矩形区域的宽,Lleft = Lright = 所在矩形区域的高。如果f < 1,那么所有角半径都乘以f。
浏览器支持
实际中,目前没有任何一款浏览器支持这个属性,只有部分浏览器利用其私有属性支持部分实现:
10 Firefox对border-radius的支持:
-moz-border-radius: <length>{1,4} | inherit
-moz-border-radius-bottomleft : <length> | inherit
-moz-border-radius-bottomright : <length> | inherit
-moz-border-radius-topleft : <length> | inherit
-moz-border-radius-topright : <length> | inherit
10 只对每个角设置一个半径,只支持实现四分之一圆角,并不支持椭圆形圆角。
10 具体每个角的命名规则也和W3C不一致,这个比较讨厌。
10 Firefox3圆角已经相当圆滑了,Firefox2比较糟糕,好在它即将终结了。
11 Safari和Chrome对border-radius的支持:
-webkit-border-radius: <length>{1,2} | inherit
-webkit-border-bottom-left-radius : <length>{1,2} | inherit
-webkit-border-bottom-right-radius : <length>{1,2} | inherit
-webkit-border-top-left-radius : <length>{1,2} | inherit
-webkit-border-top-right-radius : <length>{1,2} | inherit
11 每个属性有1个或2个值,当有两个值时1个表示水平半径,一个表示垂直半径writing-mode改变也随之而变)。所以,Safari和Chrome中的圆角可以是椭圆角。
11 webkit的实现方法和 W3C的CSS3草案2005年版本 非常一致,和当前的草案最大不同就是简写属性-webkit-border-radius的属性值也只有1个或2个值,意义和前面相同。
11 Chrome中圆角锯齿比较严重,基本上和Firefox2是同一水平,或许是它的webkit版本较低造成的。
11 由于webkit出生于khtml,所以把 上面属性中的webkit换成khtml即会得到以khtml为核心的浏览器支持的属性了。
11 当相邻的角半径之和大于所在矩形区域的大小时,都会直接设置所有的角半径为0,即圆角失效,而不会像Firefox那样同比率缩小。
12 Opera尚不支持border-radius,虽然 Opera10 alpha拥有众多的CSS3改进,但是依旧看不到对其支持的希望。
13 IE就不用说了,标准的不支持了。从MSDN的 CSS Compatibility and Internet Explorer 中可以看出IE8已经铁定不支持了。
实际应用
最简单的应用就是支持的用圆角,不支持的用方角。比如Wordpress2.7的后台、雅虎口碑UED 的blog和 今天你带伞了吗? 。基础代码如下:
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
实现请看演示实例。
利用VML可以实现从IE5-7的圆角 ,但是貌似IE8不支持VML了。组件DD_roundies 就是综合以上解决方案的一个具体应用。说实话这样实现出来的圆角也比较粗糙了,我感觉还不如不要。
像VML一样,Canvas也能实现圆角,切除了IE外,所有的主流浏览器都支持。所以就有了两者结合实现的组件 Cornerz 。
如果上面的现实太痛苦,而又非要用圆角的话,要么一个像素一个像素去拼装,比如Chunky Borders;要么就老老实实用图片来实现吧,比如 CSS Mojo 的方式。
介绍CSS3使用技巧5个
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的Web。目前这些技术不应该用在正式的客户项目,它们更适合你的个人博客站点,Web 设计社区,或者不会有客户向你投诉的场合。
1. 圆角效果
CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
甚至单个角也可以实现圆角,不过 Mozilla 和 Webkit 的语法稍有不同。
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;
所支持的浏览器:Firefox, Safari , Chrome
2. 图形化边界
顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
这里,border: 5px 设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-rightright-image
border-right-image
支持的浏览器: Firefox 3.1, Safari , Chrome.
3. 块阴影与文字阴影
阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website.
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
前两个属性设置阴影的 X / Y 位移,这里分别是 10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色。文字阴影也可以这样设置:
text-shadow: 2px 2px 5px #ccc;
支持的浏览器:Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ,Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值,最后一个值代表透明度,另外,我们还可以使用 opacity 实现透明度(目前的灯箱效果多使用该技巧 - 译者)
4. 使用 RGBA 实现透明效果
目前,Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者),在 CSS3,可以直接实现透明效果。
rgba(200, 54, 54, 0.5);
background: rgba(200, 54, 54, 0.5);
color: rgba(200, 54, 54, 0.5);
color: #000;
opacity: 0.5;
支持的浏览器: Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).
5. 使用 @Font-Face 实现定制字体
Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般来说宋体是唯一安全的 - 译者),现在,使用 CSS3 的 @font-face 可以自己指定字体,不过因为牵扯到版权问题,实际能用的字体也是有限的 (另外,体积庞大的中文字体也是一个不好解决的问题 - 译者)。
语法如下:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
支持的浏览器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻烦,可以在 IE 实现这个功能,请参考: make font-face work in IE )
虽然 CSS3 尚在开发中,上面提到的这些功能已经可以在部分浏览器中使用了,尤其是 Safari。不幸的是,Safari 并非主流浏览器。
Firefox 目前拥有大量用户基础,另外,即将推出的 Firefox 3.1 支持不少 CSS3 效果,因为 Firefox 用户的升级积极性很高,因此,会有不少用户可以提前体验 CSS3 的新功能。
Google Chrome 今年刚刚发布,它基于 Webkit 引擎,因此和 Safari 很相似,因为 Safari 主要用于 Mac 市场,Chrome 可以正好弥补 Windows 市场的空缺。
根据统计数据,2008年11月止,44.2% 的用户使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari,意味着 CSS3 的部分功能已经可以支持近半 Internet 用户,而在 Web 设计圈子,这个比例可能更高,大约有 73.6% (Blog.SpoonGraphics 提供的数据)
6. 负面因素
上面讲述的这些 CSS3 功能会给你的网站带来出色的效果,但仍有一些负面的因素必须考虑:
Internet Explorer: 46% 的 Internet 无法看到这些效果,因此不要将这些东西用于重要的设计。同时保证,在这些效果不起作用的地方,有替代设计可用。
CSS 验证问题: 这些 CSS3 功能并非最终版本,目前不同的浏览器使用不同标签实现这些功能,可能为你的 Style Sheet 带来验证上的问题。
臃肿代码: 因为不同浏览器要使用不同定义语法,最终将导致你的 CSS 代码十分臃肿。
不当的使用: 对这些效果的不当使用,可能带来一些不良后果,阴影效果尤其如此。
本文国际来源:http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
中文翻译来源:COMSHARP CMS 官方网站(35公里译)
CSS3教程:新增加的结构伪类
4.7.3 结构伪类(Structural pseudo-classes)
CSS 3增加了大量的结构伪类,利用文档结构树来实现表现,从而可以减少页面内class属性和ID属性的定义,使得文档更加简洁。
以下示例,请使用Win XP的Google Chrome或者MAC OS X的Safari 3.1查看。
1. E:root
匹配文档的根元素。在(X)HTML中,根元素就是<html>元素。例如:
:root { border: 1px solid blue; }
在(X)HTML文档中,其效果等同于:
html { border: 1px solid blue; }
2. E:nth-child(n)
匹配所有在其父元素中排第n个的E元素。n可以是数字/关键字/公式,例如:
tr:nth-child(3) { …… } /* 匹配所有表格里面排第3的行<tr> */
tr:nth-child(2n+1) { …… } /* 2n+1,公式,匹配所有奇数行 */
tr:nth-child(odd) { …… } /* odd:关键字,匹配所有奇数行 */
tr:nth-child(2n) { …… } /* 2n:匹配所有偶数行*/
tr:nth-child(even) { …… } /* even:关键字,匹配所有偶数行li */
注意:元素的第一个子元素索引为“1”。
利用这个伪类,可以很容易地实现双背景色甚至多背景色表格等效果。
例如有xhtml如下:
<ol id="sample1">
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
</ol>
CSS如下:
#sample1 li:nth-child(even) { /* #sample1的子元素中排序为奇数的li */
background:#FF9; /* 也可以设定float、margin、border等属性 */
}
#sample1 li:nth-child(odd) {
background:#FC3;
}
图4-41 E:nth-child(n)的应用1
也可以实现三色甚至多色的背景。例如下列代码:
#sample2 li:nth-child(3n+1) {
background:#F90;
}
#sample2 li:nth-child(3n+2) {
background:#Fc3;
}
#sample2 li:nth-child(3n) {
background:#FF9;
}
<ol id="sample2">
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
……
</ol>
其显示如图4-42所示。
图4-42 E:nth-child(n)的应用2
此时需注意的是,3n+1表示的是3行循环内的第1行,而3n则是第3行。
同时,也可以指定某一个特定的子元素,例如下列代码:
#sample3 li:nth-child(1) {
color:#F00;
}
#sample3 li:nth-child(2) {
color:#F60;
}
#sample3 li:nth-child(3) {
color:#FC0;
}
<h4>前3名不同显示的排行榜</h4>
<ol id="sample3">
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
……
</ol>
分别指定了第1、2、3个li的前景颜色color,其显示如图4-43所示。
图4-43 E:nth-child(n)的应用3
也可以为同一列的单元格td指定相同的背景色:
#sample4 td:nth-child(3n+1) {
background:#FCC;
}
#sample4 td:nth-child(3n+2) {
background:#F99;
}
#sample4 td:nth-child(3n+3) {
background:#C6F;
}
<table border="0" cellspacing="0" cellpadding="0" id="sample4">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
……
</table>
其显示如图4-44所示。
图4-44 E:nth-child(n)的应用4
但是,需要特别注意的是,父元素内所有的子元素都参与排序,而无论元素的类型是什么,在上面的例子中,子元素的类型都是单一的(li或者td),而下面这个例子中,子元素的类型不再单一(包括dt和dd):
<dl id="sample5">
<dt>dt 1,总排行1</dt>
<dd>dd 1,总排行2</dd>
<dt>dt 2,总排行3</dt>
<dd>dd 2,总排行4</dd>
<dd>dd 3,总排行5</dd>
<dt>dt 3,总排行6</dt>
<dt>dt 4,总排行7</dt>
<dd>dd 4,总排行8</dd>
</dl>
如果设定如下的CSS,那么其显示的效果则如图4-45所示。
#sample5 dt {
font-weight:bolder;
}
#sample5 dt:nth-child(odd){
background:#6CF;
}
图4-45 E:nth-child(n)包括父元素内所有类型的子元素
由图4-45读者可以发现,判断dt是否为奇数的条件是其在子元素内总排序,而不是dt元素单独排序。
实例演示如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:nth-child :: css 3选择器</title>
<style type="text/css">
body {
font: small/2 "宋体", serif;
background:#fff;
color:#000;
}
h1,h2,h3 {
font-size: larger;
}
h4 {
background:#eee;
}
#sample1 li:nth-child(even) {
background:#FF9;
}
#sample1 li:nth-child(odd) {
background:#FC3;
}
#sample2 li:nth-child(3n+1) {
background:#F90;
}
#sample2 li:nth-child(3n+2) {
background:#Fc3;
}
#sample2 li:nth-child(3n) {
background:#FF9;
}
#sample3 li:nth-child(1) {
color:#F00;
}
#sample3 li:nth-child(2) {
color:#F60;
}
#sample3 li:nth-child(3) {
color:#FC0;
}
#sample4 {
width:300px;
}
#sample4 td:nth-child(3n+1) {
background:#FCC;
}
#sample4 td:nth-child(3n+2) {
background:#F99;
}
#sample4 td:nth-child(3n+3) {
background:#C6F;
}
#sample5 dt {
font-weight:bolder;
}
#sample5 dt:nth-child(odd){
background:#6CF;
}
</style>
</head>
<body>
<h1>css 3 选择器</h1>
<h2>结构伪类(Structural pseudo-classes)</h2>
<h3>E:nth-child(n)</h3>
<h4>双背景色</h4>
<ol id="sample1">
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
</ol>
<h4>三背景色</h4>
<ol id="sample2">
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
</ol>
<h4>前3名不同显示的排行榜</h4>
<ol id="sample3">
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
<li>列表项哦列表项</li>
</ol>
<h4>表格的不同列背景色</h4>
<table border="0" cellspacing="0" cellpadding="0" id="sample4">
<caption>
表格的不同列背景色
</caption>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</table>
<h4>所有子元素</h4>
<dl id="sample5">
<dt>dt 1,总排行1</dt>
<dd>dd 1,总排行2</dd>
<dt>dt 2,总排行3</dt>
<dd>dd 2,总排行4</dd>
<dd>dd 3,总排行5</dd>
<dt>dt 3,总排行6</dt>
<dt>dt 4,总排行7</dt>
<dd>dd 4,总排行8</dd>
</dl>
</body>
</html>
CSS3五个技巧给你的网站带来出色的效果
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不应该用在正式的客户项目,它们更适合你的个人博客站点,Web 设计社区,或者不会有客户向你投诉的场合。
1. 圆角效果
CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
甚至单个角也可以实现圆角,不过 Mozilla 和 Webkit 的语法稍有不同。
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;
所支持的浏览器:Firefox, Safari , Chrome
用例: Twitter.
请参阅:
W3C Working Draft
Border-radius on CSS3.info
The Art of Web
2. 图形化边界
顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
这里,border: 5px 设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-rightright-image
border-right-image
支持的浏览器: Firefox 3.1, Safari , Chrome.
用例: Blog.SpoonGraphics.
请参考:
W3C Working Draft
Border-image on CSS3.info
Border-image in Firefox
3. 块阴影与文字阴影
阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website.
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
前两个属性设置阴影的 X / Y 位移,这里分别是 10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色。文字阴影也可以这样设置:
text-shadow: 2px 2px 5px #ccc;
支持的浏览器:Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ,Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值,最后一个值代表透明度,另外,我们还可以使用 opacity 实现透明度(目前的灯箱效果多使用该技巧 - 译者)
用例: 24 Ways.
请参考:
W3C Working Draft
Box-shadow on CSS3.info
W3C Working Draft
Text-shadow on CSS3.info
4. 使用 RGBA 实现透明效果
目前,Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者),在 CSS3,可以直接实现透明效果。
rgba(200, 54, 54, 0.5);
background: rgba(200, 54, 54, 0.5);
color: rgba(200, 54, 54, 0.5);
color: #000;
opacity: 0.5;
支持的浏览器: Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).
用例: 24 Ways (RGBA).
请参考:
W3C Working Draft
RGBA on CSS3.info
Pure CSS Opacity
5. 使用 @Font-Face 实现定制字体
Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般来说宋体是唯一安全的 - 译者),现在,使用 CSS3 的 @font-face 可以自己指定字体,不过因为牵扯到版权问题,实际能用的字体也是有限的 (另外,体积庞大的中文字体也是一个不好解决的问题 - 译者)。
语法如下:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
支持的浏览器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻烦,可以在 IE 实现这个功能,请参考: make font-face work in IE )
用例: TapTapTap.
请参阅:
Fonts available for font-face embedding
Font-face in IE, making Web fonts work
Web fonts, the next big thing - A List Apart
虽然 CSS3 尚在开发中,上面提到的这些功能已经可以在部分浏览器中使用了,尤其是 Safari。不幸的是,Safari 并非主流浏览器。
Firefox 目前拥有大量用户基础,另外,即将推出的 Firefox 3.1 支持不少 CSS3 效果,因为 Firefox 用户的升级积极性很高,因此,会有不少用户可以提前体验 CSS3 的新功能。
Google Chrome 今年刚刚发布,它基于 Webkit 引擎,因此和 Safari 很相似,因为 Safari 主要用于 Mac 市场,Chrome 可以正好弥补 Windows 市场的空缺。
根据统计数据,2008年11月止,44.2% 的用户使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari,意味着 CSS3 的部分功能已经可以支持近半 Internet 用户,而在 Web 设计圈子,这个比例可能更高,大约有 73.6% (Blog.SpoonGraphics 提供的数据)
6. 负面因素
上面讲述的这些 CSS3 功能会给你的网站带来出色的效果,但仍有一些负面的因素必须考虑:
Internet Explorer46% 的 Internet 无法看到这些效果,因此不要将这些东西用于重要的设计。同时保证,在这些效果不起作用的地方,有替代设计可用。
CSS 验证问题
这些 CSS3 功能并非最终版本,目前不同的浏览器使用不同标签实现这些功能,可能为你的 Style Sheet 带来验证上的问题。
臃肿代码
因为不同浏览器要使用不同定义语法,最终将导致你的 CSS 代码十分臃肿。
不当的使用
对这些效果的不当使用,可能带来一些不良后果,阴影效果尤其如此。
CSS3教程:边框属性border的极致应用
作者:冰极峰
博客地址:http://www.cnblogs.com/binyong
这世界太疯狂,Border属性也搞模仿秀!
这里讨论的都是关于边框属性border的极致应用,这些应用虽说有些剑走偏门,但在一些特殊的场合,可能还是会用得上的,如果你对HTML代码有洁癖,有切肤之痛,并且认为冗余的标签影响到你的视觉神经,那么你可以权当一种业余欣赏。
下面这个截图是border属性的几种基本变化,通过对这几种基本变化的延伸引用,你可以变化出各种丰富的案例出来:
如我在另一篇文章《用div+css模拟表格对角线》中说到的一样,这些变化其实就是基于如下的基本原理:
border-left:20px transparent dotted;
border-top:20px green solid;
border-right:20px transparent dotted;
border-bottom:20px orange solid;
width:0px;
height:0px;
overflow:hidden;
注意:transparent是用来透明的,并且要设置的线条的样式为dotted(点线)。宽高为0,就会只显示边框部分,然后用overflow来将多余部分截取掉,剩下的就是斜角内容了。
斜角的组合规律如下:
1 border-left和border-top组成从左上到右下的斜线
2 border-right和border-top组成从右上到左下的斜线
3 border-right和border-bottom组成从右下到左上的斜线
4 border-left和border-bottom组成从左下到右上的斜线
有了这些基本规律就可以变化无穷了,发挥你的想像力吧,我们来看看有些什么变化。
下图是应用这种原理变化出来的不规则选项卡,为了简少代码量,我没有加上js功能,你们可以自己试试。
PS:这些链接全部有翻滚状态,你可直接使用,已经做了兼容性测试。
滑动块也是经常看到的,下面的截图二中模仿了一个时间滑动块功能,当然你还可以发挥的想像力,将一个滚动条也用这种方式作出来。在本图的右上角有两个相反的三角形,这种在一些需要折叠的面板中经常见,这个也是用Border模仿出来的。
下面这两个东东我也不知道该将它取个什么名字,你可以叫它电话拨盘,可能现在只会在很早之前的电影中才能看了。我暂时将它取名为幸运转轮吧! :)
这种你可以将它用在登录页面中去。随你吧!!
PS:这里面的每个形状都是可以点击的,你可将它做成一个链接地址。
下面这种就是一种变态的做法了,本来我想模仿成五角星,结果歪打正着,成了这么一种形状。暂时就这样吧。我数学不好,关于五边形的算法不知如何计算,望知道的朋友交流一下。
兼容性测试,在以下几种浏览器中正常工作:
IE6、IE7、FF3、Opera 9.63、傲游
直接下载看吧:
运行代码框
<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border属性的终极研究---看我七十二变(冰极峰:http://www.cnblogs.com/binyong)</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;}
body{background:#555;}
#wrapper{width:500px;margin:0 auto;border-left:4px #888 solid;border-right:4px #888 solid;background:#fff;padding-bottom:50px;}
#corner{position:relative;}
#corner em,#corner b,#corner strong,#corner i,#corner span{display:block;border-top:67px green solid;border-right:67px transparent dotted;width:0;height:0;overflow:hidden;}
#corner b{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;}
#corner em{border-width:63px;border-top-color:orange;position:absolute;top:0;left:0;}
#corner i{border-width:37px;border-top-color:orange;position:absolute;top:0;left:0;}
#corner strong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;}
#corner span{border-width:33px;border-top-color:#fff;position:absolute;top:0;left:0;}
#corner a{position:absolute;display:block;width:10px;height:10px;font-size:12px;color:#fff;font-weight:bold; text-decoration:none;}
#corner a#b1{left:34px;top:3px;}
#corner a#b2{left:18px;top:18px;}
#corner a#b3{left:3px;top:33px;}
h1 {width:310px;height:100px;line-height:100px;color:#2f231a;font-size:16px;margin:0px auto;position:relative;}
h1 b {color:#b2c63a;font-size:16px;font-style:normal;left:-1px;position:absolute;top:-1px;}
h1 strong{position:absolute;top:25px;left:100px;height:22px;}
/*盒子*/
.tab{width:400px;margin:0 auto;border:1px orange solid;margin-top:10px;text-align:center;}
h2{border-bottom:1px orange solid;line-height:30px;padding-left:10px;background:#FFC966;color:#7C66FF;text-align:center;}
.blog{background:#2f231a;}
.blog a:link,.blog a:visited{color:#fff;}
h3{text-align:center;line-height:26px;height:26px;}
.photobox{border-left:10px red ridge;border-top:10px green ridge;border-right:10px yellow ridge;border-bottom:10px orange ridge;}
.tab_pannel{width:380px;overflow:hidden;margin:20px auto;}
.tab_content{border:1px orange solid;height:100px;width:368px;margin:0 auto;text-align:left;}
/*基本形状----------------------------------------------------------------------------*/
.base{border:1px orange solid;padding-top:10px;width:370px;margin:0 auto;overflow:hidden;}
.base b{width:0;height:0;overflow:hidden;margin-right:20px;display:block;}
/*下三角形*/
.t1{border-left:20px #fff solid;border-top:20px green solid;border-right:20px #fff solid;border-bottom:0;}
/*左三角形*/
.t2{border-top:20px #fff solid;border-right:20px red solid;border-bottom:20px #fff solid;border-left:0;overflow:hidden;}
/*右三角形*/
.t3{border-top:20px #fff solid;border-left:20px #000 solid;border-bottom:20px #fff solid;border-right:0;}
/*上三角形*/
.t4{border-left:20px #fff solid;border-bottom:20px blue solid;border-right:20px #fff solid;border-top:0;}
/*基本形状*/
.tb_base{margin:0 auto;}
.tb_base .s1{display:block;border-left:20px red solid;border-top:20px green solid;border-right:20px yellow solid;border-bottom:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
.tb_base .s2{display:block;border-left:10px red solid;border-top:10px green solid;border-right:10px yellow solid;border-bottom:10px orange solid;width:20px;height:20px;overflow:hidden;margin:0 auto;}
.tb_base .s3{display:block;border-left:20px transparent dotted;border-top:20px green solid;border-right:20px transparent dotted;border-bottom:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
.tb_base .s3-1{display:block;border-top:20px transparent dotted;border-left:20px green solid;border-bottom:20px transparent dotted;border-right:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}
.tb_base .s4{display:block;border-left:40px transparent dotted;border-top:40px green solid;width:0px;height:0px;overflow:hidden;}
.tb_base .s5{display:block;border-right:40px transparent dotted;border-top:40px red solid;width:0px;height:0px;overflow:hidden;}
.tb_base .s6{display:block;border-left:40px transparent dotted;border-bottom:40px #000 solid;width:0px;height:0px;overflow:hidden;}
.tb_base .s7{display:block;border-bottom:40px blue solid;border-right:40px transparent dotted;width:0px;height:0px;overflow:hidden;}
/*综合运用0*/
#menu1{list-style:none;width:380px;margin:0px auto;padding-left:5px;height:20px;}
#menu1 li{float:left;width:85px;height:20px;line-height:20px;margin-right:10px;}
#menu1 li a{position:relative;width:100%;display:block;background:green;text-decoration:none;text-align:center;color:#fff}
#menu1 li a b{position:absolute;top:20px;left:40px;border-left:5px #fff solid;border-top:5px green solid;border-right:5px #fff solid;border-bottom:0;display:none;width:0;height:0;overflow:hidden;}
#menu1 li a:hover{background:orange;}
#menu1 li a:hover b{border-top:5px orange solid;display:block;}
/*综合运用1-菱形菜单*/
p{padding:20px;}
#other li a b{top:10px; right:20px;background:#fff;}
#menu2{list-style:none;width:368px;height:20px;position:relative;left:6px;*left:0px;}
#menu2 li{width:70px;float:left;}
#menu2 li a{display:block;width:70px;border-left:20px transparent dotted;border-top:0;text-decoration:none;color:#fff;position:absolute;}
#menu2 #m1 a{border-bottom:20px green groove;left:39px;}
#menu2 #m2 a{border-bottom:20px red groove;left:119px;}
#menu2 #m3 a{border-bottom:20px blue groove;left:199px;}
#menu2 #m4 a{border-bottom:20px orange groove;left:279px;}
#menu2 li a span{display:block;position:absolute;top:5px;left:8px;}
#menu2 li a:hover{color:#00FFFF;}/**/
#menu2 #m1 a:hover{border-bottom:20px #CC9933 groove;}
#menu2 #m2 a:hover{border-bottom:20px gray groove;}
#menu2 #m3 a:hover{border-bottom:20px #FF00FF groove;}
#menu2 #m4 a:hover{border-bottom:20px #99CC66 groove;}
/*综合运用2-菱形菜单*/
#menu3{list-style:none;width:368px;height:20px;position:relative;left:6px;*left:0;}
#menu3 li{width:90px;height::20px;line-height:20px; float:left; overflow:hidden;position:relative;}
#menu3 li a{display:block;width:70px;height:0px;text-decoration:none;border-left:20px transparent dotted;border-bottom:20px green solid;border-top:0;position:relative;}
#menu3 li a span{display:block;position:absolute;top:2px;left:0px;color:#fff;}
#menu3 li a em{display:block;position:absolute; top:0px;left:50px;border-left:20px green solid;border-bottom:20px #fff solid;width:0;height:0;overflow:hidden;background:#fff;cursor:pointer;}
#menu3 li a:hover{ border-bottom-color:orange;}
#menu3 li a:hover span{background:orange;cursor:pointer;color:#0000CC;}
#menu3 li a:hover em{border-left:20px orange solid;}
#menu3 #m5{left:54px;}
#menu3 #m6{left:39px;}
#menu3 #m7{left:24px;}
#menu3 #m8{left:9px;}
/*滑动条*/
.box{width:200px;line-height:30px;margin:30px auto; position:relative;border:1px orange solid;}
.sliderbg{display:block;border-bottom:5px #F30 solid;width:200px;height:2px;line-height:2px;position:absolute;top:8px;left:0px;}
#sliderbar{width:10px;height:20px;margin-left:20px;}
#sliderbar a{display:block;border-left:5px transparent dotted;border-right:5px transparent dotted;border-bottom:5px orange solid; width:0;height:0;position:relative;}
#sliderbar a b{position:absolute;top:5px;left:-5px;display:block;width:10px;height:15px;background:orange;overflow:hidden;}
#sliderbar a:hover{border-bottom:5px #00F solid;}
#sliderbar a:hover b{background:#00F; cursor:pointer;}
/*右边的上下三角形*/
.title{border-bottom:1px orange solid;line-height:26px;padding-left:10px;position:relative;overflow:hidden;background:#FFDB99;height:26px;}
.title b{display:block;width:280px;line-height:26px;height:26px;padding-left:10px;float:left;}
.title span a{display:block;width:0px;height:0px;float:left;overflow:hidden;position:absolute;border-left:5px transparent dotted;border-right:5px transparent dotted;}
.title .up a{border-bottom:5px #666 solid;top:7px;right:10px;}
.title .up a:hover{border-bottom:5px blue solid;}
.title .down a{border-top:5px #666 solid;top:14px;right:10px;}
.title .down a:hover{border-top:5px blue solid;}
/*综合运用3---------------------------幸运转轮1*/
#menu4box{width:182px;height:160px;margin:20px auto;background:#fff;/*背景颜色值*/}
#menu4{list-style:none;width:182px;height:20px;position:relative;margin:20px auto;}
#menu4 li{position:absolute;}
#menu4 li a{display:block;width:0;height:24px;border-top:10px transparent dotted;border-right:20px #FF00CC solid;border-bottom:10px transparent dotted;}
#menu4 li a em{display:block;width:0;height:24px;border-top:10px transparent dotted;border-left:20px #FF00CC solid;border-bottom:10px transparent dotted;position:absolute;top:0;left:20px;cursor:pointer;}
#menu4 li a b{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}
#menu4 li a{text-decoration:none;}
#menu4 li a:hover{border-right-color:#CC3300;}
#menu4 li a:hover em{border-left-color:#CC3300;cursor:pointer;}
#menu4 li a:hover b{color:#000000;cursor:pointer;}
#m9{left:50px;}
#m10{left:95px;}
#m11{left:27px;top:38px;}
#m12{left:72px;top:38px;}
#m13{left:117px;top:38px;}
#m14{left:50px;top:76px;}
#m15{left:95px;top:76px;}
/*综合运用4--------------------------幸运转轮2*/
#menu5box{position:relative;width:182px;height:200px;margin:20px auto;background:#fff;/*背景颜色值*/}
#menu5{list-style:none;}
.intbg{position:absolute;top:50px;left:40px;display:block;width:100px;height:98px;background:#CC66CC;/*线条颜色值*/}
#menu5 li{position:absolute;}
/*键*/
.out a{display:block;width:0;height:26px;border-top:10px transparent dotted;border-right:20px #CC66CC solid;border-bottom:10px transparent dotted;}
.out a em{display:block;width:0;height:26px;border-top:10px transparent dotted;border-left:20px #CC66CC solid;border-bottom:10px transparent dotted;position:absolute;top:0;left:19px;cursor:pointer;}
.out a b{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}
.out a{text-decoration:none;}
.out a:hover{border-right-color:#CC3300;}
.out a:hover em{border-left-color:#CC3300;cursor:pointer;}
.out a:hover b{color:#000000;cursor:pointer;}
/*填充背景色*/
.int a{display:block;width:0;height:24px;border-top:10px transparent dotted;border-right:20px #fff solid;border-bottom:10px transparent dotted;}
.int a em{display:block;width:0;height:24px;border-top:10px transparent dotted;border-left:20px #fff solid;border-bottom:10px transparent dotted;position:absolute;top:0;left:19px;}
.int a b{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;}
/*外面定位*/
#t1{left:72px;top:5px;}
#t2{left:11px;top:39px;}
#t3{left:133px;top:39px;}
#t4{left:11px;top:111px;}
#t5{left:133px;top:111px;}
#t6{left:72px;top:146px;}
/*里面定位*/
#f1{left:50px;top:38px;}
#f2{left:94px;top:38px;}
#f3{left:28px;top:76px;}
#f4{left:72px;top:76px;}
#f5{left:116px;top:76px;}
#f6{left:50px;top:115px;}
#f7{left:94px;top:115px;}
/*中心圆*/
#f4 a{text-decoration:none;border-top:10px transparent dotted;border-right:20px #FF0000 solid;border-bottom:10px transparent dotted;}
#f4 a em{display:block;border-top:10px transparent dotted;border-left:20px #FF0000 solid;border-bottom:10px transparent dotted;position:absolute;top:0;left:19px;cursor:pointer;}
#f4 a:hover{border-right-color:#CC3300;}
#f4 a:hover em{border-left-color:#CC3300;cursor:pointer;}
#f4 a:hover b{font-size:14px;color:#fff;cursor:pointer;}
#f4 a b{display:block;width:20px;height:22px;position:absolute;top:15px;left:13px;font-size:14px;color:#fff;cursor:pointer;}
/*综合运用5-------------------------六角星*/
#menu6box{position:relative;width:182px;height:150px;margin:20px auto;background:#fff;}
#menu6{list-style:none;padding-top:10px;}
#menu6 li{width:50px;height:55px;border:1px red solid;position:relative;float:left;margin-left:5px;margin-bottom:5px;}
#menu6 li a{display:block;border-left:25px transparent dotted;border-bottom:40px red solid;border-right:25px transparent dotted;width:0;height:0;margin:0 auto; text-decoration:none;}
#menu6 li a b{display:block;border-left:25px transparent dotted;border-top:40px red solid;border-right:25px transparent dotted;width:0;height:0;position:absolute;top:15px;left:0px; z-index:1; cursor:pointer;}
#menu6 li a em{display:block;width:20px;height:22px;position:absolute; z-index:2; top:20px;left:18px;font-size:14px;color:#fff; font-style:normal;font-weight:bold;cursor:pointer;}
#menu6 li a:hover{border-bottom-color:#000099;}
#menu6 li a:hover b{border-top-color:#000099;}
#menu6 li a:hover em{color:orange;}
</style>
</head>
<body>
<div id="wrapper">
<div id="corner"><b></b><em></em><i></i><strong></strong><span></span>
<a href="http://www.cnblogs.com/binyong" id="b1">冰</a>
<a href="http://www.cnblogs.com/binyong" id="b2">极</a>
<a href="http://www.cnblogs.com/binyong" id="b3">峰</a>
</div>
<h1>Border属性的终极研究---看我七十二变<b>Border属性的终极研究---看我七十二变</b><strong>原创:冰极峰</strong></h1>
<h2 class="blog">新Blog地址:<a href="http://www.cnblogs.com/binyong">http://www.cnblogs.com/binyong</a></h2>
<div class="tab" style="margin-top:30px;">
<h2>border的基本形状</h2>
<div class="base" style="margin-top:10px;">
<h3>四条边框的基本变化</h3>
<table class="tb_base">
<tr>
<td>
<span class="s2"></span><p>默认样式</p>
</td>
<td>
<span class="s1"></span><p>米字格</p>
</td>
<td>
<span class="s3"></span><p>左右透明</p>
</td>
<td>
<span class="s3-1"></span><p>上下透明</p>
</td>
</tr>
</table>
</div>
<div class="base" style="margin-top:10px;">
<h3>相邻两条边框组成45度斜角</h3>
<table class="tb_base">
<tr>
<td>
<span class="s4"></span>
</td>
<td>
<span class="s5"></span>
</td>
<td>
<span class="s6"></span>
</td>
<td>
<span class="s7"></span>
</td>
</tr>
</table>
</div>
<div class="base" style="margin-top:10px;margin-bottom:10px;">
<h3>相邻三条边框组成三角形</h3>
<table class="tb_base">
<tr>
<td>
<b class="t1"></b>
</td>
<td>
<b class="t2"></b>
</td>
<td>
<b class="t3"></b>
</td>
<td>
<b class="t4"></b>
</td>
</tr>
</table>
</div>
</div>
<div class="tab">
<h2>百变神功--border的综合运用</h2>
<div class="tab_pannel">
<ul id="menu1">
<li><a href="http://www.cnblogs.com/binyong" target="_blank">今日头条<b style="display:block;"></b></a></li>
<li><a href="http://www.cnblogs.com/binyong" target="_blank">产品新闻<b></b></a></li>
<li><a href="http://www.cnblogs.com/binyong" target="_blank">热点跟踪<b></b></a></li>
<li id="other"><a href="http://www.cnblogs.com/binyong" target="_blank">分类新闻<b></b></a></li>
</ul>
<div class="tab_content">
<p>这是一个第一个综合应用的例子,鼠标移到上面菜单看看效果,加上JS就是一个选项卡了</p>
</div>
</div>
<div class="tab_pannel">
<ul id="menu2">
<li id="m1"><a href="http://www.cnblogs.com/binyong" target="_blank"><span>今日头条</span></a></li>
<li id="m2"><a href="http://www.cnblogs.com/binyong" target="_blank"><span>产品新闻</span></a></li>
<li id="m3"><a href="http://www.cnblogs.com/binyong" target="_blank"><span>热点跟踪</span></a></li>
<li id="m4"><a href="http://www.cnblogs.com/binyong" target="_blank"><span>分类新闻</span></a></li>
</ul>
<div class="tab_content">
<p>这是第二个综合应用的例子,不规则菜单的应用。</p>
</div>
</div>
<div class="tab_pannel">
<ul id="menu3">
<li id="m5"><a href="http://www.cnblogs.com/binyong" target="_blank"><span>今日头条</span><em></em></a></li>
<li id="m6"><a href="http://www.cnblogs.com/binyong" target="_blank"><span>产品新闻</span><em></em></a></li>
<li id="m7"><a href="http://www.cnblogs.com/binyong" target="_blank"><span>热点跟踪</span><em></em></a></li>
<li id="m8"><a href="http://www.cnblogs.com/binyong" target="_blank"><span>分类新闻</span></a></li>
</ul>
<div class="tab_content">
<p>这是第三个综合应用的例子,菱形菜单的应用。</p>
</div>
</div>
<div class="tab_content" style="height:100px;margin-bottom:20px;">
<h3 class="title">Border的模仿秀---滑动栏
<span class="up"><a id="arrow" href="#none" title="我是border模仿的哟" onclick="closeW('context')"></a></span>
<span class="down"><a id="arrow" href="#none" title="我也是用border模仿的哟" onclick="f_s('context')"></a></span>
</h3>
<div class="box">
<span class="sliderbg" ></span>
<div id="sliderbar" title="我是border模仿">
<a href="#"><b></b></a>
</div>
</div>
</div>
<div class="tab_content" style="height:250px;">
<h3 class="title">Border的模仿秀---幸运转轮1
<span class="up"><a id="arrow" href="#none" title="我是border模仿的哟" onclick="closeW('context')"></a></span>
<span class="down"><a id="arrow" href="#none" title="我也用是border模仿的哟" onclick="f_s('context')"></a></span>
</h3>
<div class="photobox" id="menu4box">
<ul id="menu4">
<li id="m9"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>祝</b></a></li>
<li id="m10"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>朋</b></a></li>
<li id="m11"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>友</b></a></li>
<li id="m12"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>幸</b></a></li>
<li id="m13"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>福</b></a></li>
<li id="m14"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>安</b></a></li>
<li id="m15"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>康</b></a></li>
</ul>
</div>
</div>
<div class="tab_content" style="height:280px;margin-top:20px;">
<h3 class="title">Border的模仿秀---幸运转轮2
<span class="up"><a id="arrow" href="#none" title="我是border模仿的哟" onclick="closeW('context')"></a></span>
<span class="down"><a id="arrow" href="#none" title="我也用是border模仿的哟" onclick="f_s('context')"></a></span>
</h3>
<div id="menu5box" class="photobox">
<span class="intbg"></span>
<ul id="menu5">
<li class="int" id="f1"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b></b></a></li>
<li class="int" id="f2"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b></b></a></li>
<li class="int" id="f3"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b></b></a></li>
<li class="int" id="f4"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>爱</b></a></li>
<li class="int" id="f5"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b></b></a></li>
<li class="int" id="f6"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b></b></a></li>
<li class="int" id="f7"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b></b></a></li>
<li class="out" id="t1"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>有</b></a></li>
<li class="out" id="t2"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>一</b></a></li>
<li class="out" id="t3"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>种</b></a></li>
<li class="out" id="t4"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>叫</b></a></li>
<li class="out" id="t5"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>幸</b></a></li>
<li class="out" id="t6"><a href="http://www.cnblogs.com/binyong" target="_blank"><em></em><b>福</b></a></li>
</ul>
</div>
</div>
<div class="tab_content" style="height:230px;margin-top:20px;margin-bottom:20px;">
<h3 class="title">Border的模仿秀--六角星
<span class="up"><a id="arrow" href="#none" title="我是border模仿的哟" onclick="closeW('context')"></a></span>
<span class="down"><a id="arrow" href="#none" title="我也用是border模仿的哟" onclick="f_s('context')"></a></span>
</h3>
<div id="menu6box" class="photobox">
<ul id="menu6">
<li><a href="http://www.cnblogs.com/binyong" id="b1" target="_blank"><b></b><em>六</em></a></li>
<li><a href="http://www.cnblogs.com/binyong" id="b2" target="_blank"><b></b><em>角</em></a></li>
<li><a href="http://www.cnblogs.com/binyong" id="b3" target="_blank"><b></b><em>星</em></a></li>
<li><a href="http://www.cnblogs.com/binyong" id="b4" target="_blank"><b></b><em>亮</em></a></li>
<li><a href="http://www.cnblogs.com/binyong" id="b5" target="_blank"><b></b><em>晶</em></a></li>
<li><a href="http://www.cnblogs.com/binyong" id="b6" target="_blank"><b></b><em>晶</em></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3中的5个有趣的新技术
CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果,但了解它们还是必须且很有趣味性的。网页教学网将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。
相关文章:介绍CSS3使用技巧5个
1:基本标记
在我们开始这个教程之前,先来创建整个教程都要使用的基本标记。
我们的xHTML需要一下div元素:
#round, 使用CSS3代码实现圆角.
#indie, 应用个别的几个圆角.
#opacity, 展示新的CSS3实现不透明度的方式.
#shadow,展示不使用Photoshop的情况下,使用CSS3来实现阴影效果.
#resize, 展示如何使用某种CSS来实现重设大小的效果.
综上所述,我们的xHTML应该是这样的:
<!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/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”round”> </div>
<div id=”indie”> </div>
<div id=”opacity”> </div>
<div id=”shadow”> </div>
<div id=”resize”>
<img src=”image.jpg” alt=”resizable image” width=”200″ height=”200″>
</div>
</div>
</body>
</html>
下面来创建基本CSS文件:
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
正如你上面看到的,我们给每个div元素300px的宽和高,并让它们向左浮动,整个页面的div都留给我们在后面的工作中添加样式。看到本信息,说明该文章来源于网页教学网www.webjx.com,如果文章不完整请到网页教学网webjx.com浏览!
2:圆角
目前而言,创建圆角的方法有很多,但都很麻烦。最常用的方法:首先,你要创建圆角的图片;然后,你要创建很多html元素并使用背景图像的方式显示圆角。具体流程你我都很清楚。
这个问题将在CSS3中很简单的解决掉,那就是叫做“border-radius”的属性。我们先创建一个黑色的div元素并给他设置黑色的边框。边框就是要实现“border-radius”属性效果的前提。
像这样:
#round {
background-color: #000;
border: 1px solid #000;
}
现在你已经创建了div元素,它看起来和你预期的样子一样,300px款和高有楞有角且是黑色的。下面我们来添加实现圆角的代码,它是如此的简洁,仅仅需要两行代码。
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
在这里,我们添加了两行类似的代码,-moz-适用于Firefox浏览器,而-webkit-则是用于Safari/Chrome浏览器。
注:目前为止IE浏览器不支持border-radius属性,所以如果想让IE也有圆角效果,那么就要单独添加圆角了。
border-radius这个属性直译过来是边框半径的意思,就如同Photoshop一样,它的值越大,圆角也就越大。
3:个别的圆角
如果按照过去的习惯做法,会浪费你很多时间,现在CSS3能快速解决!
我们现在只想让div的右上和右下是圆角,那么仅需稍作修改:
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
试想一下这种做法会用在网页中的什么元素呢?对!就是标签式的导航按钮!
4:以CSS3的方式修改不透明度
现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。加此信息网页教学网(webjx.com)发布目的是为了防止你变懒!webjx.com不主张采集!
这行代码很好记,仅仅是 “opacity: value;”:
#opacity {
background-color: #000;
opacity: 0.3;
}
5:阴影效果
实现阴影也有很多方法,最常用的就是使用Photoshop制作成阴影图片,然后应用到背景属性中。但CSS3让你的工作更有效率,不幸的是,目前只有Safari和Chrome支持这个新特性。
仅仅需要一行代码,不过它有4个不同的值:
-webkit-box-shadow: 3px 5px 10px #ccc;
下面我来解释一下这四个值都代表什么,第一个3px是指定阴影与div元素之间的水平(横向)距离,第二个5px指的是阴影与div之间的垂直(纵向)距离,第三个10px指的是阴影的模糊度(类似于photoshop中的羽化),值越大越细腻。最后的值不说大家也知道,就是阴影的颜色。
我们最终阴影效果代码;
#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}
正如你看到的,我们个这个div设置了白色的背景,黑色的边框和亮灰色的阴影。
6:调整大小
在最新版本的CSS中,调整元素的尺寸已经成为可能(不过目前仅Safari支持)看到本信息说明该文是通过网页教学(webjx.com)整理发布的,请不要删掉!
使用这个代码以后,我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单,可以说仅需要一行代码,当然你还可以配合使用一些曾经使用过的属性,比如”max-width”, “max-height”, “min-width”和 “min-height”.
#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}
在这里主要说一下resize和overflow属性,resize:both;的意思就是所有边都可以调整尺寸,它的值还有horizontal和vertical,顾名思义,就是横向和纵向。而overflow是为了配合resize工作的,在这里使用auto.
总结
怎么样,你在这篇文章中有没有什么收获呢?虽然现在仅有很少数的浏览器支持CSS3,但不可否认的是CSS3的确会为我们的工作节省更多的时间。如果你对渐进增强有所了解和认识的话,我想你会欣然接受CSS3这个强大的新版本的。不要再把你的时间都花在IE6上了,那样你只能会是过时的前端开发工程师。
CSS3伪类选择器:nth-child()
CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。
语法:
:nth-child(an+b)
为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+。
描述:
伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明。
第一种:简单数字序号写法
:nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
例子:
li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
第二种:倍数写法
:nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
例子:
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三种:倍数分组匹配
:nth-child(an+b) 与:nth-child(an-b)
先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)
例子:
li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/
第四种:反向倍数分组匹配
:nth-child(-an+b)
此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。
例子:
li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/
第五种:奇偶匹配
:nth-child(odd) 与:nth-child(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。
附:例子效果图
CSS教程:CSS3圆角属性
随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持。
对于一些浏览器,它们有其私有的圆角属性。如 FF 的 -moz-border-radius ,Safari 和 Chrome 的 -webkit-border-radius 。效果见下图:
FF 的圆角
Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核,这里就只附 Chrome 的效果了)
IE 和 Opera 就没有私有的圆角属性了,如果有的话,那制作圆角应该就简单多了,把各自的私有属性全部写上,让各个浏览器“对号入座”,就达到了“兼容”的效果。
Firefox 3.5的HTML5和CSS3特性
mozilla发布firefox3.0之后不久,就推出了3.1的测试版,经过N久,出了N个beta,还是没有出正式的3.1版,不过,他们跳了一下,将直接发布Firefox 3.5——大踏步前进的版本,也将带来更多的特性和用户体验。那么它对于我们前端开发人员来说,有哪些影响呢?让我们来看一看吧。
1.HTML5
Firefox3.5将支持audio和vidio标签。
audio的HTML代码可以是这样的:
1 2 3
|
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> 您的浏览器尚不支持<code>audio</code>标签。 </audio> |
查看更多关于audio的信息。
Video可以这样写:
1 2 3
|
<video src="videofile.ogg" autoplay> 您的浏览器尚不支持<code>video</code>标签。 </video> |
查看更多关于video的信息。
另外,Firefox 3.5还将支持其它的一些HTML5特性,比如,离线资源和拖拽。
2.CSS
Firefox 3.5对CSS的支持改进比较多,主要是支持更多的CSS3特性,我简单的列表如下:
1 @font-face支持,该规则支持CSS3网络字体。
2 opacity支持升级,抛弃-moz-opacity私有属性,完整支持CSS的 opacity属性。
3 :before和 :after伪类更新的CSS 2.1水平,支持position、float、list-style-*、和一些display等属性。
4 text-shadow支持。text-shadow是一个CSS3属性,即文字阴影。目前,只有Chrome、safari和Opera浏览器支持CSS3的文字阴影。
5 word-wrap。这是对Firefox来说一个新增的CSS属性,目前IE系浏览器支持该属性。这可以解决字符串过长时的bug,相信很多网页设计师都遇到过。
6 transforms,transforms属性目前只有webkit核心浏览器支持,包括safari和chrome,Firefox3.5也将支持该属性,它可以将一个元素按照设定的比例变换,必去旋转或缩放,详情请查看 -moz-transform和-moz-transform-origin。
Firefox还支持其它的一些新特性,比如一些伪类等,用的不是太多,这里就不介绍了,感兴趣的话可以到firefox开发者网站去查看。不过前端观察会继续跟进firefox新版本的进展。
从中我们可以看到,目前对CSS3和HTML5的支持最好的是webkit核心浏览器,safari支持的最棒,chrome2.0beta的支持也在不断改进。而firefox在下一个版本中也将有很大的进步。唯一不足的是IE系浏览器,依然跟在各个浏览器的后面。
CSS3教程:box-sizing属性
说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内。这为前端工程师的工作平添了不少麻烦,几户每个需要定义尺寸的 box 都要思量一下:是否触发了“盒模型 bug”?
同时,由于另一撮浏览器对标准的遵从,我们在精确定义一个在有限空间内显示的 box 时,也需要计算一下:留给它的空间只有那么大,刨去 border 和 padding,我们该把它的 width 写成多少呢?
这种情况在 CSS3 时代有了改善,得益于这个叫做 box-sizing 的属性,它具有“content-box”和“border-box”两个值。
定义 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准;
定义 box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6 相同;
为什么说这个属性“迟来”呢?IE 对于盒模型的解释固然不符合 W3C 的规范,但是也有它的好处:无论如何改动 border 与 padding 的值,都不会导致 box 总尺寸发生变化,也就不会打乱页面整体布局。而在 Firefox 等现代浏览器下,如果我们要改变一下 padding 的值,就不得不重新计算 box 的 width。现在 IE6 寿终正寝,这个 CSS 属性未免有些姗姗来迟。
试用这个新属性,Firefox 请使用 -moz-box-sizing,Safari / WebKit 请使用 -webkit-box-sizing,Opera 直接用 box-sizing 即可。
人们期待的CSS3的10大功能
CSS3 仍遥遥无期,还是指日可待,这不是一个技术问题,而是人们什么时候可以彻底放弃那些不符合 W3C 标准的旧浏览器的问题。CSS3 备受期待是肯定的,CSS Tricks 网站做了一次投票调查,票选备受期待的 CSS 功能,一共有7000人参与,结果如下。有趣的是结果的前三名非常的接近。
#1) 圆角 (22.0%, 1,541 票)
这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用,对 Web 设计者来说无疑是最受期待的,然而 IE 仍然没有要支持这个功能的迹象。
#2) 多背景(22.0%, 1,523 票)
这个功能是我最期待的,但向后兼容会是一个很大的问题。
#3) @font-face (21.0%, 1,424 票)
Firefox 的最新版本将支持该功能,Safari,Opera 甚至 IE 也将支持或已经支持该功能,我们会看到该功能的广泛应用,只是字体的版权问题会很麻烦。
#4) 动画与渐变(12.0%, 818 票)
Webkit 在这方面是领头军,动画也是设计的一部分,也该属于 CSS。这些会慢慢实现,当 Webkit 之外的浏览器也开始支持这个功能,我们会看到很多令人惊讶的效果。
#5) 渐变色 (8.0%, 535 票)
定义一个固定色背景很简单,但渐变色就没有那么简单了,渐变色很适合通过代码实现,Webkit 又在这方面抢了先。
#6) Box 阴影(4.0%, 271 票)
阴影也是一种渐变色,以往是通过背景图片实现的,如果考虑到多方向的阴影,事情会变得更复杂,Box 阴影机制让一切问题迎刃而解。
#7) RGBa - 加入透明色 (3.0%, 234 票)
RGBa 中的 a 代表透明色,透明对设计者来说非常重要,目前除了 IE,这一功能正在被广泛采用。
#8) 文字阴影(2.0%, 140 票)
也属于渐变色的概念,让文字拥有阴影,以前甚至无法通过图片背景实现,因此这将为设计者带来前所未有的方便。
#9) 其它 (2.0%, 168 票)
本文来源:http://css-tricks.com/poll-results-css3-features/
css3教程:文字阴影解析
最近我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.
首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.
text-shadow是什么?
text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.
text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片.
目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的.
接下来看看text-shadow的语法:
text-shadow:color length length length;
color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)
举个例子:
text-shadow: -1px 2px 3px #ffb69a;
表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a
一些试验与demo
我做了点小小的试验,做成了一个 Demo页面 .为了让浏览器不支持text-shadow的用户看到阴影效果,请直接看以下截图(有位朋友说那个”火鸟”看起来像”鸡”):
css3教程:把系统日志记录到远程服务器
1、远程服务器的配置
修改/etc/sysconfig/syslog 文件:
# vi /etc/sysconfig/syslog
将SYSLOGD_OPTIONS="-m 0" 修改成:SYSLOGD_OPTIONS="-r -m 0"
-r 表示启用记录远程主机的日志。
2、本机的配置
修改/etc/syslog.conf文件
# vi /etc/syslog.conf
authpriv.* @192.168.0.1 表示将本机的登录日志记录到192.168.0.1这台服务器上。
要记录其它类型的日志类似
3、分别重启日志服务
/etc/init.d/syslog restart
利用CSS3特性和浏览器中的工具进行网页设计
级联样式表在13年前被引入,而且被广泛使用的CSS 2.1 标准在11年前被创建,显然我们现在已经与当年相差千里了。相当了不起的是期间网站开发有了多少进步——事实上,我们也无法想象。
为什么会这样呢,当提到CSS的时候,过去我们是如此的不情愿和害怕尝试?为什么我们还要使用讨厌的hack和依赖JavaScript的技术来写样式?为什么我们不能利用丰富的CSS3 特性和现代浏览器中可用的工具 并将我们的设计品质带到下一个等级?
是时候在我们的项目中引入CSS3 特性了,不用害怕逐渐在我们的样式表中加入css3特性和选择器会出问题。让我们的客户意识到CSS3的优势 (而且让旧浏览器更快的消失)是我们力所能及的事情——我们应该这样做,特别是在它能够让网站更加灵活并减少开发和维护成本的时候。
在本文中,网页教学网将研究CSS3的优势,并看一下一些网页设计师是如何使用它们的。最后,我们将了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特性。
同时请参考我们之前的一篇相关文章:
使用CSS3将你的网站设计推向未来
使用浏览器专有属性
为了使用大部分CSS3特性,我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在,大部分浏览器只支持部分CSS3属性。而且不幸的是,一些属性甚至到最后都可能不被W3C推荐,所以通过指定浏览器专有属性,将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。
当然,这种方法的劣势是,将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟,我们不想在我们的样式表中重拾私有浏览器hack的需求。Internet Explorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用,并在20世纪九十年代成为一个传奇;它们依然让现存的很多网站(在其他浏览器中)表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地,对吧?
然而,网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。
最常见的私有属性是用于Webkit核心浏览器的(比如, Safari), 它们以-webkit-开始,以及Gecko核心的浏览器(比如, Firefox),以-moz-开始,还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展(目前只有IE8支持-ms-前缀)
作为专业的设计师,我们不得不注意:使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下,比如试验或学习,我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。
扩展阅读
Vendor-specific extensions and W3C
Vendor-specific extensions to CSS3
Vendor-specific properties
1. 选择器
CSS选择器是个难以置信地强大的工具:它们允许我们在标签中指定特定的HTML元素而不必使用多余的class、ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的,而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离,高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。
属性选择器
三个新的属性选择器被添加到CSS3:
[att^="value"]
匹配包含以特定的值开头的属性的元素
[att$="value"]
匹配包含以特定的值结尾的属性的元素
[att*="value"]
匹配包含含有特定的值的属性的元素
tweetCC 使用一个属性选择器来指定有title属性并以字符“tweetCC”结尾的链接:
a[title$="tweetCC"]{
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。
连字符
CSS3中唯一新引入的连字符是通用的兄弟选择器(同级)。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如,给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点),在样式表中定义下面的样式就足够了:
div~img {
border: 1px solid #ccc;
}
浏览器支持:所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6!
伪类
或许在CSS3中增加最多的就是新的伪类了,这里是一些最有趣和最有用的:
:nth-child(n)
让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组,你可以简单的这样使用:
:nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/
:nth-last-child(n)
与上个选择器的思想同样,但是从后面匹配元素(倒序),比如,为了指定一个div里面的最后两个段落,我们可以使用下面的选择器:
div p:nth-last-child(-n+2)
:last-child
匹配一个父节点下的最后一个子元素,等同于
:nth-last-child(1)
:checked
匹配选择的元素,比如复选框
:empty
匹配空元素(没有子元素)。
:not(s)
匹配所有不符合指定声明(s)的元素。比如,如果你想让所有的没有使用”lead”类的段落的显示为黑色,可以这样写:
p:not([class*="lead"]) { color: black; }
.
Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落,并将其的外间距(margin)设置为0:
#primary .text p:last-child{
margin: 0;
}
浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类,Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, nly-child, :root, :empty, :target, :checked, :enabled 和:disabled,但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。
伪元素
在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮(选中)的元素。
浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
使用CSS3新技术 完美实现圆角效果
现在使用CSS3 技术不需要图片即可实现圆角,把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能:
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox 和 Safari 实现圆角</div> |
其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius 是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性,如果你只要指定某一个角是圆角的话,它们都分别定义了四个属性:
-moz-border-radius-topleft / -webkit-border-top-left-radius |
当然 IE (包括 IE8)还是不支持,所以该效果只能在 Firefox, Safari, 以及 Chrome 中查看。
jQuery插件实现css3效果
css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。
在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。
1.多重背景
#backgrounds-box {
background: url(top-backgroundg.png) top left no-repeat,
url(bottom-backgroundg.png) bottombottom left no-repeat,
url(middle -backgroundg.png) left repeat-y;
padding: 35px;
}
2.文字阴影
b { text-shadow: 5px 5px 5px #666666; }
3.圆角
#rounded-corners-box {
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-rightright-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-rightright-radius: 8px;
}
4.透明效果
.div-name { background: #333333; opacity:0.8; width: 380px; height:70px; }
下面来看看jQuery插件实现css3效果的插件:
jQuery Corners 0.3
轻松地实现漂亮的圆角,无需额外的标签或图片。支持 iPhone.、Chrome、Firefox、Safari 2+、 Opera 9.0+、Internet Explorer 6+。
jQuery Canvas Rounded Corners
通过canvas 实现圆角的jQuery插件,支持IE7、FF。
How To Border Image with CSS3 and jQuery
CSS3 draft 介绍灰墙强大的图片边框技术。
How To CSS Multiple Backgrounds / Background Layering with jQuery
实现多重图片背景的这个插件可以极大地减少xhtml标签,精简你的代码,多重背景的概念类似于PS的图层,一个图层叠在另一个图层上面。
How To Drop Shadow with jQuery
为页面上的文字和透明图片添加柔和和阴影效果。
How To Text-shadow in Internet Explorer using jQuery
这个教程会教你如何在IE中轻松实现文字阴影效果。
How To Element Gradient with jquery
允许你自定义元素的填充渐变效果,支持指定渐变的方向。
How to Rounded Corners in jQuery
一个简易的用jQuery实现圆角的教程。
CSS3 Template Layout realized with jQuery
实现CSS3布局。
Creating a polaroid photo viewer with CSS3 and jQuery
结合CSS3的 Box Shadow 属性Rotate 实现拖动图片过程中的阴影效果。
jSlickmenu: A jQuery plugin for slick CSS3 menus
jSlickmenu通过类似CSS3的rotation 和shadows属性现非常酷的菜单效果。
HTML5和CSS3新的WEB标准和浏览器支持
好罢这篇本来是我私下做的笔记,我特别喜欢在Evernote上做备忘的笔记,虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击!比如跟别人讨论The Dark Knight里小丑在医院对检察官说了什么让他变成双面人,我一句对白都想不起来,还有big bang theory s2里penny玩age of conan时的人物名字是”Queen Penelope”,我看的时候印象很深,一个月后就连奥德赛都想不起来了。留份笔记总觉得心里踏实些……啊又跑题了
本文整理了一些最重要(或者说人气比较高罢)的新标准,虽然它们多数还只是w3c的草案,离Recommendation级别还早,却已经成为新一轮浏览器大战中备受追捧的明星,开发者社区里也涌现出大量相关的demo和API封装,有些已经进入生产环境(比如google在iphone上实现的gmail离线应用),其实我觉得如今的web领域里,从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了,是因为现在web application的需求太高了么…… UPDATE:刚才在solidot发软文的时候我突然想明白怎么表述这个问题:其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者,就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样,所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准,即时它们还是W3C Working Draft,相比之下IE team就比较缺乏动力,果然计划经济缺乏活力亚XD……
由于是源自笔记,对每个条目我只会列出称呼和语法特征,暂时没时间写详细的解释和可执行的示例,但是会给出相关的文档地址,除了列出已经支持该特性的浏览器,也会为不支持的浏览器提供替代/过渡的实现。
===================废话结束的分割线=======================
CSS3 Media queries
对整个外链css文件和部分css代码使用的媒体类型侦测,人气高的原因显然是因为移动设备……
1 <link media=“all and (orientation:portrait)”src="screen.css" type="text/css">
2 @media all and (min-color: 4){ ...}
w3c标准:http://www.w3.org/TR/css3-mediaqueries/
MDC文档:https://developer.mozilla.org/En/CSS/Media_queries
Opera文档:http://www.opera.com/docs/specs/css/
支持:Firefox 3.5+, Safari 3+, Opera 7+
CSS3 2D Transforms
css变形,有人用这个实现伪3d效果以及旋转效果的jquery插件
3 -moz-transform:rotate(-45deg)skew(15deg, 15deg);
4 sprite.style['-webkit-transform'] ='rotate(' +v +'rad)';
w3c标准:http://www.w3.org/TR/css3-2d-transforms/
MDC文档:https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍: http://webkit.org/blog/130/css-transforms/
支持:Firefox 3.5+, Safari 3.1+
替代/过渡:IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx
CSS3 Transitions and CSS Animations
备受期待的css动画,webkit团队提出的草案,transition实现简单的属性渐变,animation定义更复杂的动画效果
5 transition-property:width;
6 transition-duration: 1s;
7
8 animation-name: 'diagonal-slide';
9 animation-duration: 5s;
10 animation-iteration-count: 10;
11 @keyframes 'diagonal-slide'{}
w3c标准:http://www.w3.org/TR/css3-transitions/
w3c标准:http://www.w3.org/TR/css3-animations/
webkit博客的介绍:http://webkit.org/blog/138/css-animation/
约翰同学的介绍:http://ejohn.org/blog/css-animations-and-javascript/
支持:Safari 3.1+
CSS3 Downloadable fonts
能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype
12 @font -face {}
w3c标准:http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档:http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档:https://developer.mozilla.org/en/CSS/@font-face
支持:Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+
附赠:其他CSS3 property的兼容性
ppk同学维护的文档: http://www.quirksmode.org/css/contents.html
css3.info维护的文档:http://www.css3.info/modules/selector-compat/
一个测试页面:http://westciv.com/iphonetests/
HTML5 DOM Storage
简洁的持久存储,键值对的形式
13 window.localStorage
14 window.sessionStorage //可跨域,标签页关掉就清空
w3c标准:http://www.w3.org/TR/webstorage/
ppk同学维护的兼容性列表:http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档:https://developer.mozilla.org/en/DOM/Storage
MSDN文档:http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx
支持:Firefox 3.5+, Safari 4.0+, IE 8.0+
HTML5 Offline Application Cache
用一个manifest文件缓存静态资源(图片,css, js之类)在离线状态下使用,不是结构化数据
15 <html manifest="foo.manifest">
16 CACHE MANIFEST
17 index.html
18 style/default.css
19 images/logo.png
w3c标准:http://www.w3.org/TR/offline-webapps/#offline
MDC文档:https://developer.mozilla.org/en/Offline_resources_in_Firefox
支持:Firefox 3.5+
HTML5 Database Storage
本地数据库,支持sql,最早是google gears实现,现在的w3c草案的编辑也是google的工程师……但奇怪的是,gears的api跟现在的草案不兼容,chrome甚至为了保留捆绑的gears的数据库api而删除了webkit实现的html5 api……而google在iphone上实现gmail离线功能的时候又采用webkit的api……真纠结……
20 var db =window.openDatabase("notes","","The Example Notes App!",1048576);
21 db.transaction(function(tx) {
22 tx.executeSql(‘SELECT *FROM Notes’,[],function(tx,rs) {});
23 });
w3c标准:http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介绍:http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
iphone的文档:http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1
支持:Safari 3.1+
替代/过渡:Gears http://code.google.com/p/gears/wiki/Database2API
HTML5 Web Workers
多线程,在后台执行复杂运算,不能操作dom,线程之间通过消息事件通信
24 var myWorker =new Worker('my_worker.js');
25 myWorker.onmessage =function(event) { event.data };
26 myWorker.postMessage(str);
w3c标准:http://www.w3.org/TR/workers/
MDC文档:https://developer.mozilla.org/En/Using_web_workers
支持:Firefox 3.5+
替代/过渡:Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal
HTML5 Geolocation
地理api
27 window.navigator.geolocation
w3c标准:http://www.w3.org/TR/geolocation-API/
MDC文档:https://developer.mozilla.org/En/Using_geolocation
支持:Firefox 3.5+
替代/过渡:Gears http://code.google.com/p/gears/wiki/GeolocationAPI
HTML5 Drag and Drop
原生拖拽事件
28 ondragstart
29 ondrag
30 ondragend
31 //拖拽过程中
32 ondragenter
33 ondragover
34 ondragleave
35 ondrop
w3c标准:http://www.w3.org/TR/html5/editing.html#dnd
MDC文档:https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple文档:http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233
支持:Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+
HTML5 Audio and Video
用html标签来嵌入视频音频的好处并非是“开源格式”,而是“开放性”,让多媒体可以与其他页面元素交互,或者用页面技术去跟视频“mashup”,这种随意组合和交互的能力是web技术兴盛的基石,也是像flash这类封闭RIA容器最大的缺点。
36 <video controls>
37 <source src=“zombie.ogg”type=“video/ogg”/>
38 <source src=“zombie.mp4″type=“video/mp4″/>
39 </video>
MDC文档:https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介绍:http://webkit.org/blog/140/html5-media-support/
支持:Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/过渡:用video标签嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/
HTML5 Canvas
apple发明,最早应用于dashboard,目前主流的js图像技术,mozilla已经在实现OpenGL ES标准的Canvas 3D了,另外据说ie team为支持canvas做了大量工作……实际上canvas api相当底层,特别是交互方面,不如svg直观,所以出现了很多封装它的库
40 var ctx = $('#canvas')[0].getContext("2d");
41 ctx.fillStyle ="#00A308";
42 ctx.beginPath();
43 ctx.arc(220,220,50,0,Math.PI*2,true);
44 ctx.closePath();
45 ctx.fill();
MDC文档:https://developer.mozilla.org/en/Canvas_tutorial
支持:Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+
替代/过渡:excanvas.js http://code.google.com/p/explorercanvas/
SVG
w3c标准:http://www.w3.org/TR/SVG12/
IBM DW教程:http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896
支持:Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+
替代/过渡:raphael.js http://raphaeljs.com/
XMLHttpRequest 2
主要是增加跨域能力以及请求过程中的事件
w3c标准:http://www.w3.org/TR/XMLHttpRequest2/
MDC文档:https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN文档:http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
支持:Firefox 3.5+(实现了部分), IE 8.0+(实现了部分)
Access Control
千呼万唤的跨域访问控制,目前firefox3.5和ie8有一些不同,ie8搞的XDR和XDM我也不知道是不是准备提交给w3c标准化的东西……
46 Access-Control-Allow-Origin: http://foo.example
w3c标准:http://www.w3.org/TR/cors/
MDC文档:https://developer.mozilla.org/En/HTTP_Access_Control
Cross-document Messaging (XDM)
MSDN文档:http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx
支持:Firefox 3.5+, IE8.0+
E4X (ECMA-357)
Firefox和ActionScript3早就实现了的东西……不过其实现在json这么流行,有没有E4X好像都无所谓了~(瞎说的,其实在js代码里直接写dom对象而不是html字符串,会方便很多)
MDC文档:https://developer.mozilla.org/en/E4X
支持:Firefox 1.5+
ECMAScript 5 Native JSON
原生的JSON支持,速度和安全性都比eval强一百倍亚一百倍,另外要注意Douglas Crockford的json2.js是一个用js实现的js解释器,所以安全性更好
47 JSON.parse( text,translate )
48 JSON.stringify( obj,translate )
49 String.prototype.toJSON
50 Boolean.prototype.toJSON
51 Number.prototype.toJSON
52 Date.prototype.toJSON
MDC文档:http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN文档:http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx
支持:Firefox 3.5+, IE8+
替代/过渡:json2.js http://www.json.org/json2.js
ECMAScript 5 Array Extras
js1.6里实现的数组方法,主要是forEach, map, fliter这几个函数式编程里非常重要的方法,还有反向查询
53 Array.prototype.indexOf( str )
54 Array.prototype.lastIndexOf( str )
55 Array.prototype.every( fn )
56 Array.prototype.some( fn )
57 Array.prototype.filter( fn )
58 Array.prototype.forEach( fn )
59 Array.prototype.map( fn )
MDC文档:https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras
支持:Firefox2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡:都可以通过扩展Array.prototype来模拟
ECMAScript 5 isArray()
区分数组和对象
60 Array.isArray([]);// true
支持:无
替代/过渡:Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]”;};
ECMAScript 5 Object
用GOOGLE I/O演讲里的话来说:更鲁棒(robust)的对象系统
61 Object.getPrototypeOf( obj )
约翰同学的讲解:http://ejohn.org/blog/objectgetprototypeof/
支持:Firefox3.5
替代/过渡:object.__proto__ 或 object.constructor.prototype
62 Object.create( proto,props ) //克隆或继承对象
63
64 Object.keys( obj ) //数据结构的映射
65 Object.getOwnPropertyNames( obj )
66
67 Object.preventExtensions( obj ) //不能添加新属性
68 Object.isExtensible( obj )
69
70 Object.seal( obj ) //不能删除和修改属性的配置,不能添加新属性
71 Object.isSealed( obj )
72
73 Object.freeze( obj ) //不能删除和修改属性的配置,不能添加新属性,不能写属性
74 Object.isFrozen( obj )
约翰同学的讲解:http://ejohn.org/blog/ecmascript-5-objects-and-properties/
支持:无
替代/过渡:Object.create和Object.keys可以自己实现
ECMAScript 5 Property Descriptor
对象属性的访问控制
75 Object.getOwnPropertyDescriptor( obj,prop )
76 Object.defineProperty( obj,prop,desc )
77 Object.defineProperties( obj,props )
78 desc ={
79 value:true,
80 writable:false,//修改
81 enumerable:true,//for in
82 configurable:true,//删除和修改属性
83 get:function(){ return name;},
84 set:function(value){ name =value;}
85 }
约翰同学的讲解:http://ejohn.org/blog/ecmascript-5-objects-and-properties/
支持:无
替代/过渡:Object.defineProperties其实相当于jQuery.extend,用来实现Mixin
ECMAScript 5 Getters and Setters
python和ruby里都有的属性访问方法
86 obj ={
87 get innerHTML() { return …;},
88 set innerHTML(newHTML) { …}
89 };
MDC文档:https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
支持:Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡:
非标准,Firefox1.5里的旧方法
90 HTMLElement.prototype.__defineGetter__("innerHTML",function () {});
91 HTMLElement.prototype.__defineSetter__("innerHTML",function (val) {});
支持:Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
标准
92 Object.defineProperty(document.body,"innerHTML",{ get :function () {} });
MSDN文档:http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx
支持:IE8+ (只能对DOM使用)
ECMAScript 5 Strict Mode
ES5的严格模式,删除了旧版本中容易引起问题的元素,并且会显式的报错,方便调试
93 "use strict";//以下情况下抛出异常
94 //对未定义的变量赋值
95 //操作被设置为不可写,不可配置或不可扩充的属性
96 //删除变量,函数,参数
97 //在对象直接量里重复定义属性
98 //eval做关键字,在eval的字符串里定义变量
99 //覆写arguments
100 //使用arguments.caller和arguments.callee(匿名函数必须具名才能引用自己)
101 //(function(){ ... }).call( null ); // Exception
102 //使用with
约翰同学的讲解:http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
支持:无
替代/过渡:……从现在开始养成严谨的编程习惯
ECMAScript 5 其他新特性
传递函数的引用时,绑定this
103 Function.prototype.bind(thisArg,arg1,arg2....) /
支持:无
替代/过渡:prototype http://www.prototypejs.org/api/function/bind
ISO-formatted dates
104 Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ
支持:无
替代/过渡:datejs http://code.google.com/p/datejs/
105 String.prototype.trim()
支持:Firefox3.5
替代/过渡:各种正则实现 http://blog.stevenlevithan.com/archives/faster-trim-javascript
===================废话又开始的分割线=======================
其实我把这个东西发出来是希望能促进创新的氛围,让更多人认识到很多新技术已经进入到“实用”阶段。
如果只是想做个实验性的webgame,或是只能用于特定平台的应用(比如iphone,greasemonkey),firefox3.5+webkit的支持就已经足够罢。
如果不能无视主流平台,有很多技术能让你gracefully degrade(优雅的退化)或者选取不同的方法实现兼容的接口。
如果你等不及IE x在若干年后实现xx,希望提前享受福利,有些技术的设计原则就是让你能在没有native支持的情况下可以自己实现一模一样的功能或语法糖(syntactic sugar),比如ES5对象的继承和访问控制,从ES4/ActionScript3时期那些老土的关键词(class extands private static)改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn),不会只是为了酷炫罢……
很多人都喜欢抱怨“我这辈子都没机会用HTML5”,但是只要把视线从自己脚下那巴掌大块地移开看看别处,会发现世界其实一直都在改变喔XD
HTML5和CSS3给网站设计带来出色效果
1. 圆角效果
CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。
1.moz-border-radius: 20px;
2.webkit-border-radius: 20px;
3.border-radius: 20px;
甚至单个角也可以实现圆角,不过 Mozilla 和 Webkit 的语法稍有不同。
1.moz-border-radius-topleft: 20px;
2.moz-border-radius-topright: 20px;
3.moz-border-radius-bottomleft: 10px;
4.moz-border-radius-bottomright: 10px;
5.webkit-border-top-rightright-radius: 20px;
6.webkit-border-top-left-radius: 20px;
7.webkit-border-bottom-left-radius: 10px;
8.webkit-border-bottom-rightright-radius: 10px;
所支持的浏览器:Firefox, Safari , Chrome
用例: Twitter.
2. 图形化边界
顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:
1.border: 5px solid #cccccc;
2.webkit-border-image: url(/images/border-image.png) 5 repeat;
3.moz-border-image: url(/images/border-image.png) 5 repeat;
4.border-image: url(/images/border-image.png) 5 repeat;
这里,border: 5px 设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:
1.border-bottom-rightright-image
2.border-bottom-image
3.border-bottom-left-image
4.border-left-image
5.border-top-left-image
6.border-top-image
7.border-top-rightright-image
8.border-right-image
支持的浏览器: Firefox 3.1, Safari , Chrome.
用例: Blog.SpoonGraphics.
3. 块阴影与文字阴影
阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website.
1webkit-box-shadow: 10px 10px 25px #ccc;
2moz-box-shadow: 10px 10px 25px #ccc;
3box-shadow: 10px 10px 25px #ccc;
前两个属性设置阴影的 X / Y 位移,这里分别是 10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色。文字阴影也可以这样设置:
text-shadow: 2px 2px 5px #ccc;
支持的浏览器:Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ,Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值,最后一个值代表透明度,另外,我们还可以使用 opacity 实现透明度(目前的灯箱效果多使用该技巧 - 译者)
用例: 24 Ways.
4. 使用 RGBA 实现透明效果
目前,Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者),在 CSS3,可以直接实现透明效果。
1.rgba(200, 54, 54, 0.5);
2.background: rgba(200, 54, 54, 0.5);
3.color: rgba(200, 54, 54, 0.5);
1.color: #000;
2.opacity: 0.5;
支持的浏览器: Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).
用例: 24 Ways (RGBA).
5. 使用 @Font-Face 实现定制字体
Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般来说宋体是唯一安全的 - 译者),现在,使用 CSS3 的 @font-face 可以自己指定字体,不过因为牵扯到版权问题,实际能用的字体也是有限的 (另外,体积庞大的中文字体也是一个不好解决的问题 - 译者)。
语法如下:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
支持的浏览器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻烦,可以在 IE 实现这个功能,请参考: make font-face work in IE )
用例: TapTapTap.
虽然 CSS3 尚在开发中,上面提到的这些功能已经可以在部分浏览器中使用了,尤其是 Safari。不幸的是,Safari 并非主流浏览器。
Firefox 目前拥有大量用户基础,另外,即将推出的 Firefox 3.1 支持不少 CSS3 效果,因为 Firefox 用户的升级积极性很高,因此,会有不少用户可以提前体验 CSS3 的新功能。
Google Chrome 今年刚刚发布,它基于 Webkit 引擎,因此和 Safari 很相似,因为 Safari 主要用于 Mac 市场,Chrome 可以正好弥补 Windows 市场的空缺。
根据统计数据,2008 年11月止,44.2% 的用户使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari,意味着 CSS3 的部分功能已经可以支持近半 Internet 用户,而在 Web 设计圈子,这个比例可能更高,大约有 73.6% (Blog.SpoonGraphics 提供的数据)
6. 负面因素
上面讲述的这些 CSS3 功能会给你的网站带来出色的效果,但仍有一些负面的因素必须考虑:
1.Internet Explorer: 46% 的 Internet 无法看到这些效果,因此不要将这些东西用于重要的设计。同时保证,在这些效果不起作用的地方,有替代设计可用。
2.CSS 验证问题: 这些 CSS3 功能并非最终版本,目前不同的浏览器使用不同标签实现这些功能,可能为你的 Style Sheet 带来验证上的问题。
3.臃肿代码: 因为不同浏览器要使用不同定义语法,最终将导致你的 CSS 代码十分臃肿。
4.不当的使用: 对这些效果的不当使用,可能带来一些不良后果,阴影效果尤其如此。