你的位置:首页 > 网页设计

[网页设计]css3干货


CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

 

CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。

 

一、圆角(border-radius)是向元素添加圆角边框。

      border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 

二、阴影 (box-shadow)

  box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

  

  注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

  .box_shadow
    {   

             box-shadow:4px 2px 6px #333333 inset;   

           }

  添加多个阴影:

  以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:

  .box_shadow{ box-shadow:3px 2px 5px #f00, -3px -2px 5px #000, 0px 0px 12px 5px #33CC00 inset;}

 

三、边框应用图片( border-image)

  border-image的语法:

  

代码:

  #border_image {
    margin:0 auto;
    height:100px;
    line-height:100px;
    text-align:center;
    font-size:30px;
    width:450px;
    border:15px solid #ccc;
    border-image:url(images/1.jpg) 70 repeat;
  }
  <div id="border_image">
     请为我镶嵌上漂亮的画框吧
  </div>


四、颜色

      background-color:rgba(100,120,60,0.5);

五、渐变色彩

      CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

  参数:

       

  用法:

  

6、未完,待续!