也许对与你来说这并不是一个什么新鲜信息。除了你可以使用标准宽度值(例如5px或1em)外，border-width属性可以接受预定义的常量值：medium, thin, 和 thick

我相信有些小知识会让你大吃一惊。 跟着最新的CSS规范，text-decoration现在的写法是这样的： a […]

这里的border属性的用法实际上是一种简写的形式，它分别设置了border-style, border-width, 和border-color — 用一句代码表示它们三个。

这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

之前说到了background-clip，你可能会想到clip属性。它的作用是按指定的尺寸、规定的大小裁剪元素。很多简单，但唯一你需要注意的事情是，clip只会在绝对定位的元素上生效。所有，你必须这样做：

在CSS2.1里，background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position。从CSS3开始，又增加了3个新的属性值，加起来一共8个。下面是按顺序分别代表的意思：

其实visibility可以有第三种值，就是collapse。当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

对于CSS的color属性，相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员，我相信你未必知道color属性除了能用在文本显示，还可以用作其它地方。

今天要向大家分享的是一个简单的具有视差效果的标签页切换技术。我们使用CSS动画技术，控制标签页切换时产生的动画动作，通过背景图的移动，让浏览者感觉到神奇的视差效果。

调用jQuery.position()方法会返回相对于父元素的位置，jQuery官方文档中描述说，它跟.offset()方法不一样，.offset()返回的是相对于document的位置，而.position()返回的是相对于父元素的位置。

IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。

虽然并不是Adobe的Photoshop发明了混合模式，但它的实现效果是最真实的。但现在，你不需要使用Photoshop来运用混合模式美化你的图片，因为CSS3里提供里动态的实现这种效果的方法。

“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果，它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。

学会开发浏览器插件是一种很强大的技能，因为现在越来越多的东西都开始往网上转移，人们对浏览器的倚重越来越大，插件也就有了越来越多的用场，所以，学习一些浏览器插件技术会有好处的。

个人认为，对于Web前端程序员和跟HTML和CSS打交道的人来说，jQuery是有史以来最伟大的发明。jQuery的出现使Web程序员的开发效率突飞猛进，不亚于工业革命给人类生产力带来的提升。

最近我在研究开发一个火狐插件，具体的功能是将网页内容截屏并分享到微博上。目前基本功能已经实现，大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果。

之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式，方法十分简单。但后来我发现只将canvas内容转变成图片输出还不够，如何能将转变后的图片保存到本地呢？

因为困惑于那种浏览器最流行，在我的苹果电脑上，我经常在谷歌浏览器和火狐浏览器之间来回切换。这两种浏览器长的如此之像，以至于我只能通过看任务栏上它们的程序名称来分辨。今天，我看到了一张Opera浏览器的截图，让我相信它们三个如出一辙。

最近在使用Wordpress时，页面加载异常缓慢，一个简单的页面需要等待很久，使用firebug查看发现，是浏览器一直在等待页面中嵌入的谷歌网络字体(google fonts)链接fonts.googleapis.com，直到超时。这说明fonts.googleapis.com这个网站也被封锁了。

在HTML5之前，对于这样的页面需求，最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”，会发现有无数的可选择的JavaScript组件。大部分这些日期选择组件都提供将日期填充到指定的输入框里的功能。

DataList的作用是在你往input输入框里输入信息时，根据你敲进去的字母，自动显示一个提示下列列表，很像百度或谷歌的搜索框的自动提示，在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。

Range就是范围：年龄范围，工资范围，人数范围。当页面上需要用户输入一个在一定范围内的数字时，使用一个类似滑块控件是十分方便的。一个典型的滑块控件使用场景就是颜色选择器中用左右拖拽箭头来调节RGB颜色值。

之前在介绍HTML5的placeholder属性时，曾实现了一些页面例子让大家参考，但这些例子里的背景文字都是灰色的，样式很单一，其实它们可以做的更好看，CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。

滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果，经常使用PhotoShop的人应该非常清楚，每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜，不需要你使用任何做图软件，用纯CSS就会生成多种的滤镜效果，比如模糊效果，透明效果，色彩反差调整，色彩反相等等

你可能已经听说过，HTML5里引入了几种新的input类型。在HTML5之前，大家熟知的input类型包括：text(输入框)，hidden(隐藏域)，submit(提交按钮)等。而HTML5到来之后，新增的input类型包括：number(数字)，date(日期)，color(颜色)，range(范围)等等。

input输入框背景文字提示效果在网上非常的普遍流行，但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式，不需要任何的JavaScript，只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。

对于第二种方法，也就是所谓的Web font网络字体。我需要先说一下它的基本原理。CSS有一种标记叫做@font-face，在@font-face声明里，你可以声明一种字体，指定这种字体字体库文件从网络中的某个地方下载。具体的写法如下：

在@font-face网络字体技术之前，浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体是因人而异的。@font-face的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。

自适应网页设计,也叫做响应式网页设计（英语：Responsive web design）是一种网页设计的技術做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其它便携设备）上阅读和导航，根据设备尺寸的不同，自动的调整页面上的元素布局和数量。

Web程序员最头疼的一个事情就是要记住很多不好记的东西。在CSS里，有很多属性都有组合写法和简写，比如Margin这个属性的组合写法是将margin-top,margin-left,margin-right,margin-bottom是个属性组合使用。而简写是将四种属性合并到一起，变成 margin：1px 2px 3px 4px。虽然很简练，但你需要记住这四个值分别是什么意思。

当使用Opera浏览器测试手头上正在开发的一个网站时，我发现在激活浏览器中的标签页(tab)时遇到了很大的麻烦。我说的“激活”是指用鼠标点击浏览器的标签页标签(tab)时，标签页没反应，没有切换成当前激活页。我需要点击几次才能让我想要的该死的标签页切换出来。

PHP里面有一个非常强大的函数库，它们的目的就是让你安全的从远程网站上取回内容。这些函数被称作CURL。现在，你不要被CURL官方页面上大量的东西吓阻，它实际上非常的简单。

::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，基本的效果是这样的:

使用视频作为网页背景是件很酷的事情，但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。

在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格是完全正确的。但大部分时候，使用table是不正确的，应该使用HTML+CSS实现你的布局。如果你无法判断是否应该使用table，参考一下上面的几条，相信你能找到答案。