随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。 上篇博文提到了《前端必须掌握30个CSS3选择器》，但是对于Css3的新属性，你又了解多少呢？虽然大多数的css3属性在很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。 关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说IE显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在文章的最后，我们将显示一个有趣的最终的案例。

1、border-radius

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。 border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。
圆
许多读者也许不会意识到我们可以用这个属性来做一个圆。

也许你已经学会了CSS的三个简单常用的选择器：#ID，.class，标签选择器，可是这些就足够了吗？随着CSS3的到来，作为前端开发者需要掌握下面三十个基本的选择器，这样才可以在平时开发中得心用手。

本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。

1、*：通用元素选择器

* {  
 margin: 0;  
 padding: 0;  
} 

*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法

*选择器也可以应用到子选择器中，例如下面的代码：

#container * {  
 border: 1px solid black;  
} 

这样ID为container 的所有子标签元素都被选中了，并且设置了border。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

#ID：ID选择器

#container {  
   width: 960px;  
   margin: auto;  
}  

ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

.class:类选择器

.error {  
  color: red;  
}  

类选择器效率低于ID选择器，一个页面可以有多个class，并且class可以放在不同的标签中使用。

查看演示

在css2中允许我们使用media的属性，例如使用screen和print，我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章，关于css2中的media文章，推荐下w3c的。今天来说说CSS3的Media Queries。CSS3中不仅仅可以使用screen和print，而且支持多媒体多分辨率的样式表。

我们先来看下CSS3 Media Queries的演示实例：http://js8.in/mywork/css3media.html，来自于（Web Designer Wall）

Max Width

故名思意，就是最大宽度的意思，例如下面的代码是在宽度小于600px的时候才执行的。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

也可以在link标签里面使用media属性，即下面的写法：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

跟Max Width相反，是最小宽度，例如当宽度大于900px的时候才运行下面的代码

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

发现的一篇关于前端优化的文章，总结的很全面，要做到面面俱到很难，往往是想优化而没有时间去优化，就像我们公司，一个项目连着一个项目~新员工的培训都省了，还想优化前端啊，不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去，就不需要刻意的后期优化了。在项目开发中，后台需要搭建好框架，前端更是需要搭建好框架，并且在页面实现中得到实现，只有这样才能事半功倍。

前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。

前言

前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么？

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
   总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

IE6在背景图片缓存上有一个bug：它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片，在IE6下会出现每次鼠标滑过则重新向服务器请求图片，如果服务器反应较慢，那么hover效果就会出现短暂的空白，令人极度不爽。虽然可以通过CSS sprites的方式解决问题的，但效果差强人意。

示例：
a{ background:url(normal.gif); } a:hover { background:url(hover.gif); }
如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片.

解决方法

具体的解决方法就是在页面中加入一段简单的javascript脚本，告诉IE6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种：

引入css外部文件的两种方法为在html页面通过link，src属性（注意空链接时的陷阱！），再者是通过CSS文件本身通过@import url()引入，虽然这两种方式都可以加载进来CSS文件，可是link和@import也存在着细微的差别。

隶属上的差别

link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多。

@import次数限制

传闻在IE6下，@import只能引入31次css文件，可是可以通过在css文件中再次import来垂直扩展，断桥残雪没有测试过，不过如果出现这样的情况，说明这个写代码的人也挺变态的。

加载顺序的不同

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显，@import这点跟把CSS文件放在页面结尾效果相同，不过如果我们一些样式开始页面并不会出现，而是在交互时才出现的CSS样式，可以通过这个方法引入，时间上错开。例如：Ajax的html，交互时的弹出框，弹出div等

在最近的一个项目中，遇到了IE6 select遮挡div的bug，为了解决这个bug我查了很多资料，试图找到一个最最有效的方法，很多人是通过iframe的方法来解决，其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 select z-index无效，遮挡div的bug。

解决方法之一：Iframe包裹select元素

使用iframe包住select，这样iframe有z-index，只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性，不可能每个select都要加个iframe吧？所以不推荐！代码如下：

<iframe style="z-index:1;position: absolute; ">
<!-- 用iframe 解决此bug -->     
            <select name="country">                    
                 <option value="1">china</option>     
                <option value="2">japanese</option>     
                <option value="1">U.S.A</option>     
             </select>     
</iframe>  

解决方法之二：以Iframe作为div的子元素，覆盖select元素

建立一个跟div同宽同高的iframe，并且z-index比div要低。这种方法推荐使用：

为了悼念地震中遇害的同胞，国家规定明天开始悼念日~下面贴出来使用CSS的IE滤镜代码实现网站变灰白的效果代码，只在IE下有效~
首先确定贵网站使用的是标准的doctype头，下面是html开头代码：

<!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">

然后使用下面的CSS代码

html {
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

如果贵网站有Flash，那么请在<object>和<&/object>之间插入一下代码：

<param value=”false” name=”menu”/>
<param value=”opaque” name=”wmode”/>

在计算机操作中经常会有反选出现，系统一般会根据选择区域的颜色，显示出补色。但windows默认的文字选择时，背景为蓝色，前景色为白色，如果背景是深色，则文字为蓝色，背景变成白色。如下图所示：

能不能改变选择的默认颜色呢，也许很多人对这个问题不是很在意，也可能你早就见到过这个效果了，但是却忽略了。查看示例(请在非IE浏览器下查看)

从博客里可以看到PPK给出了如下的CSS代码：

::-moz-selection{    /*针对Firefox*/
    background:#cc0000;
    color:#fff;
}

::selection {
    background:#cc0000;
    color:#fff;
}

code::-moz-selection {  /*code是标签选择器，可以换成p或span等*/
    background: #333333;
}

code::selection {
    background: #333333;
}

通过以上代码可以看出，你完全可以给不同的容器定义不同的反选背景颜色，

写CSS 最痛苦的是要搞定一堆浏览器兼容bug ，其次就是要面对CSS 不是programming language 这现实，不存在其他程式语言常见的变数、运算、继承等概念，使原本简单的工作变得冗长，并且使维护工作变得麻烦。
less 的出现便是为了解决这个问题：在现有CSS syntax 的基础上，为CSS 加入程式语言的特性，包括变数、scope、nested rules、运算、继承。
看例子你便会明白：

@brand_color: #F0F;

#container {
div {
color: @brand_color;
border: none; }
p {
color: @brand_color;
}
}