需要注意的选择

 

因为CSS3还在修订和审阅的过程中，真正使用CSS3需要注意三个选择：1.用能用的  2.将CSS功能作为增强，即使浏览器不支持也无伤大雅(比如圆角 border-radius)；３Modernizr

使用Modernizr需要给页面根元素的html添加class="no-js"属性，这样页面加载之后，它会根据当前浏览器支持的情况为html元素添加应用一大堆类，然后我们在CSS部分只要相应的为支持和不支持的浏览器设定不同的样式就可以了

特定于浏览器的样式

 

浏览器的开放商前缀可以在CSS中针对特定的浏览器设定样式

 

前缀	浏览器
-moz-	Firefox
-webkit-	Chrome和Safari
-ms-	Internet Explorer
-o-	Opera

所以如果想要使用放射性渐变的话就使用这样的CSS规则

.stylishBox{

 

    background:yellow;

    background-image:-moz-radial-gradient(circle,green,yellow);

    background-image:-webkit-radial-gradient(circle,green,yellow);

    background-image:-o-radial-gradient(circle,green,yellow);

    background-image:-ms-radial-gradient(circle,green,yellow);

}

有一条是肯定的，如果不适用开发商前缀，相当一部分CSS3功能无法使用

web字体

 

CSS3 通过@font-face为浏览器提供了强大的字体功能

步骤一：将字体上传到网站（最好包含多种格式的字体，因为不同的浏览器支持的格式不一样）

步骤二：@font-face进行字体注册

步骤三：使用字体

可下载字体的网站：Font Squirrel （http://www.fontsquirrel.com/fontface）

@font-face{

    font-family:'CantelliAniquaRegular'; //给这款字体取个名字，随意即可

    src:url('CantelliAniquaRegular.eot');  //必须首先注册eot格式的字体，这样笨蛋的IE不识别其他的也没有关系

    src:local('Cantelli Aniqua'),        //告诉浏览器这种字体的名字，如果客户端装了这种字体就使用客户端的。可是为了防止奇怪的同名字体被使用，一般会传入一个瞎编的名字，比如☺。这样浏览器就找不到本地文件

        url('Cantelli_Aniqua_webfont.woff') format('woff'),    //可用的其他格式，一般将WOFF的放在第一位，因为它的质量最高

 

        url('Cantelli_Aniqua_webfont.ttf') format('ttf'),

        url('Cantelli_Aniqua_webfont.svg') format('svg'),

 

}

使用的时候设置font-family属性即可    

body{

    font-family:'CantelliAniquaRegular'; 

}

 

使用谷歌的web字体

 

http://www.google.com/fonts/

选中满意的字体后，选择Quick-use取得信息，在网页中添加相应的样式表链接

例如：<link href='http://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'>

这样就可以直接使用该字体了

使用自己的字体

 

倒是可以自己找字体公司或字体发明人来设计字体，之后可以用Font Squirrel网站进行字体的格式转换，生成的字体包会包含一个@font-face命令的样式表和一个测试网页

多栏文本

 

//column-count只适合Opera，需要在Chrome、firefox和Safari中使用需要添加开发商前缀

article{

    text-align:justify;

    -moz-column-count:3;

    -webkit-column-count:3;

    column-count:3;     

}

上面的方式适合固定布局，但是如果窗口有缩放的话最好还是使用设定的栏的宽度，这样浏览器会自动创建栏来填充

 

article{

    text-align:justify;

    -moz-column-width:10em;

    -webkit-column-width:10em;

    column-width:10em;     /*设定的时候可以使用px单位，可是最好用em，因为这是相对于字体大小而言的，1em相当于两倍字体大小*/ 

}

CSS2中的媒体类型的概念

 

取得查看页面的设备的关键信息，并据此使用更换不同的样式表

<link type="text/css" media="screen" href="style.css">  <!--屏幕显示使用此样式-->

<link type="text/css" media="print" href="print-style.css"><!--打印页面使用此样式-->

 

<link type="text/css" media="handheld" href="print-style.css"><!--低带宽、小屏幕的移动设备使用此样式-->

媒体查询

 

使用媒体查询，先要检测的属性。

@media( media-query-property-name:value){

    /*新的样式*/

}

例子：max-width当前窗口中页面的宽度；在识别上网手机的时候要使用max-device-width属性

 

@media (max-width: 480px) {

  article {

    float: none;

    width: auto;

  }

  aside {

    position: static;

    float: none;

    background: pink;

    margin-left: 5px;

  }

}

 

高级媒体查询

 

 

避免媒体查询中出现冲突的情况，可以多使用几个条件，还可以使用not关键词

@media (not max-width: 600px) and   ( max-width: 700px) {

     /*窗口看度在600px~700px间时，覆盖原有样式的代码*/

}

 

 

@media (not max-width: 400px) and   ( max-width: 600px) {

     /*窗口看度在400px~600px间时，覆盖原有样式的代码*/

}

 

 

@media (max-width: 400px) {

     /*窗口看度在400px~600px间时，覆盖原有样式的代码*/

}

 

替换整个样式表

 

 

<link type="text/css" media="(max-width:480px)" href="smallDevice-style.css"><!--小设备接入的时候调用-->

还可以这样  <link type="text/css" media="print and (min-width:25cm)" href="NormalPrintstyle.css"><!--针对特定的媒体类型进行媒体查询，注意媒体类型一定要放在前面-->

识别移动设备

 

 

<link type="text/css" media="(max-device-width:480px)" href="mobile-style.css"><!--通用的识别iPhone和Android手机的媒体查询-->

 

<link type="text/css" media="(max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone-style.css"><!--针对iPhone的媒体查询，像素比为2-->

 

<link type="text/css" media="(max-device-width:768px) and (orientation:portrait)" href="ipad_portrait.css"><!--针对iPad的媒体查询，水平的-->

 

<link type="text/css" media="(max-device-width:768px) and (orientation:landscape)" href="ipad_landscape.css"><!--针对iPad的媒体查询。垂直的-->

利用这个媒体查询技术，很容易把<video>标签改变为适合移动设备的大小

<video controls width="400" height="300">

   <source src="butterfly_mobile.mp4" type="video/mp4" media="(max-device-width:480px)">

    <source src="butterfly.ogv" type="video/ogg">

</video>

透明的盒子

 

 

.transparentBox  {

      background:rgb(170,255,231);  /*作为后备颜色，在不支持的浏览器上还能显示出背景颜色*/

      background:rgb(170,255,231，0.5);  /*透明度为0.5*/

}

 

另一种方式是使用opacity属性

 

.transparentBox  {

      background:rgb(170,255,231);  /*作为后备颜色，在不支持的浏览器上还能显示出背景颜色*/

      opacity:0.5;  /*透明度为0.5*/

}

 

圆角盒子

 

border-radius属性，可以选择不同的值，半径值越大，水平和垂直线的切线和部分圆弧越长。圆角越圆滑

此外还可以单独设置每一个角

 

.rounded3 {

  border-top-left-radius: 150px 30px;      /*提供的是水平半径和垂直半径两个值*/

  border-top-right-radius: 100px 50px;

  border-bottom-left-radius: 40px 90px;

  border-bottom-right-radius: 20px 75px;

}

 

 

背景盒子，支持多背景

 

.decoratedBox {

  min-width: 320px;

  height: 270px;

  border: 1px solid gray;

  margin: 20px;

  background: transparent;

  background-image: url('top-left.png'), url('bottom-right.png');  /*为左上角和右下角设定背景，位置和下面的 background-position匹配*/

  background-position: left top, right bottom;

  background-repeat: no-repeat, no-repeat;

}

 

阴影盒子

 

CSS3 有盒子阴影和文本阴影，

 

.shadow2  {

  background-color: #7695FE;

  border: thin #336699 solid;

  padding: 13px;

  text-align: center;

  background: yellow;

  border-bottom-left-radius: 150px 30px;

  border-bottom-right-radius: 150px 30px;

  box-shadow: 8px 8px 10px 1px gray;    /*前两个值是水平和垂直方向的偏移量，第三个值是模糊距离，第四个值是阴影伸展范围，即增大模糊边界之前的实心颜色面积，第五个是阴影颜色；最后还可以加上 inset表示在元素内部创建阴影，一般使用这个的时候不设定水平和垂直的偏移量*/

}

 

 

.shadow1  {

  font-size: 30px;

  font-weight: bold;

  text-shadow: gray 10px 10px 7px;     /*首先要指定颜色值*/

}

 

 

渐变盒子

 

 

.gradient1  {

  background: yellow;      /*实心的后备颜色*/

  background: -moz-radial-gradient(circle, yellow, green);     /*还有其他函数-moz-linear-gradient*/

  background: -webkit-linear-gradient(red 0%, orange 20%, yellow 80%, violet 100%);

}

 

推荐微软在线生成工具：http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/

创建过渡效果

 

使用:hover伪类，CSS3提供了新的过渡(transition)功能，从一组样式平滑地切换到另一组样式

http://www.prosetech.com/html5/Chapter%2008/TransitionButton.html

 

.slickButton {

  color: white;

  font-weight: bold;

  padding: 10px;

  border: solid 1px black;

  background: lightgreen;

  cursor: pointer;

  -webkit-transition: all 0.5s;      /*基本的颜色过渡，这里还是使用了开发商前缀。all表示过渡所有的样式，即背景和文本颜色同时过渡*/

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

}

.slickButton:hover {

  color: black;

  background: yellow;

}

 

还可以使用之前学习的修改opacity属性、添加阴影等方式实现过渡效果

变换

 

 

.gallery img {

  margin: 5px;

  padding: 5px;

  width: 75px;

  border: solid 1px black;

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -o-transition: all 1s;

  background: white;

}

.gallery img:hover {

  -webkit-transform: scale(2.2) rotate(10deg);

  -moz-transform: scale(2.2) rotate(10deg);

  -o-transform: scale(2.2) rotate(10deg);    /*放大并旋转*/

}