在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性:

1.css3前缀使用介绍,我们直接看个例子:

  1. -webkit-transform:rotate(-3deg); // 给Chrome和Safari等webkit内核的浏览器使用
  2. -moz-transform:rotate(-3deg);    // 给Firefox浏览器使用
  3. -ms-transform:rotate(-3deg);     // 给IE浏览器使用
  4. -o-transform:rotate(-3deg);      // 给Opera浏览器使用
  5. transform:rotate(-3deg);         // 给支持css3浏览器使用

2.在学习css3属性时第一个肯定会想到圆角,因为css2中要切一张张小图拼接还要大量css代码控制还要考虑兼容很麻烦但是到css3后只要这个属性”border-radius”就能实现圆角,来看一个简单例子:

  1. border-radius:5px;          //设置4个角且圆角半径长度为5px;
  2. border-top-left-radius:5px; //设置上左第一个角且圆角半径长度为5px;其他使用我们可以参考手册,用起来很简单

3.简单的阴影 
    让我们从向你展示为网页中的任意元素添加阴影效果是多么的简单开始吧。下面的代码片段将演示一个轻微旋转并有阴影的图片,这两个效果都是使用CSS添加的。

  1. <img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />

上面的代码中,transform CSS 属性实现图片旋转,box-shadow属性为图片添加阴影效果。你可以改变旋转的角度,或者是阴影的参数,仅仅调整那些参数就OK了。

尝试一下,你将看到下面演示的旋转图片效果。

box-shadow可以设置6个参数: 
<length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<length>④:如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值 
<color>:设置对象的阴影的颜色。 
inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

4.元素变换 
刚才我们在阴影介绍中提到transform的使用,下面我们在来看一个例子,鼠标滑过图片放大:

  1. <img src="megan.jpg" />
  2. <style>
  3. img { -webkit-transform: scale(0.5); }
  4. img:hover { -webkit-transform: scale(1); }
  5. </style>

鼠标滑过图片,它就会弹出并变大,如下所示。 
 
将鼠标从图片上挪开,图片又会恢复原状。 
 
我们来看一下transform各各参数意思:

  1. transform:translate(10px,10px) //该元素水平和垂直各移动10个像素
  2. transform:rotate(10deg)        //该元素旋转10度
  3. transform:scale(2)             //该元素放大两倍
  4. transform:skew(10deg,10deg)    //该元素对应X轴和Y轴斜切扭曲10度

下节我们一起探讨动画(transition)和渐变(gradient)的使用

css3中新增的样式使用方法的更多相关文章

  1. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  2. css3-10 css3中的边框样式有哪几种

    css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css ...

  3. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  4. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  5. ECMAScript 5中对Array中新增了9个方法

    ECMAScript 5中对Array中新增了9个方法: 5个迭代方法(循环操作数组中的各个项):forEach(),map(),filter(),every()和some() 2个归并方法(迭代数组 ...

  6. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

  7. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  8. ES6中新增let命令使用方法

     在ES6中新增了let命令,该命令的用法与var 类似,但是所声明的变量只能在let命令所在的代码块(最接近let 命令的大括号内)中有效果.但是let 又有一些不同于var 的特性. 1.let定 ...

  9. CSS3中新增的内容

    (整理中······) 一.选择器 新增的伪类 1.p:first-of-type   选择属于其父元素的首个 <p> 元素的每个 <p> 元素. 2.p:last-of-ty ...

随机推荐

  1. lintcode-512-解码方法

    512-解码方法 有一个消息包含A-Z通过以下规则编码 'A' -> 1 'B' -> 2 ... 'Z' -> 26 现在给你一个加密过后的消息,问有几种解码的方式 样例 给你的消 ...

  2. lintcode-392-打劫房屋

    392-打劫房屋 假设你是一个专业的窃贼,准备沿着一条街打劫房屋.每个房子都存放着特定金额的钱.你面临的唯一约束条件是:相邻的房子装着相互联系的防盗系统,且 当相邻的两个房子同一天被打劫时,该系统会自 ...

  3. equals()和hashcode()详解

    转载自http://www.cnblogs.com/Qian123/p/5703507.html java.lang.Object类中有两个非常重要的方法:   public boolean equa ...

  4. Java JVM多线程

  5. oracle与DB2的一些架构

    首先,我们需要理解 Oracle 使用的架构,并理解它与 DB2 的不同之处.图 1 展示了 Oracle 的系统结构.将该图与 图 2 进行比较,后者显示了 DB2 的系统结构.在阅读本文的时候,为 ...

  6. Beta阶段冲刺第二天

    提供当天站立式会议照片一张 讨论项目每个成员的昨天进展 错题集功能编写没有彻底完成. 界面改善 测试数据库连接 讨论项目每个成员的存在问题 邹其元:错题集功能需要用到数据库,现在要解决的问题是怎样把数 ...

  7. QSerialPort-Qt串口通讯

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QSerialPort-Qt串口通讯     本文地址:http://techieliang. ...

  8. 【week11】回顾

    一.回答五个问题 第一次阅读<构建之法>之后的五个问题: 1.关于敏捷,书中说了我理解的就是介绍了敏捷就是“没有既定的计划与文档,马上写代码,随时发牢骚”,但是开发也是需要有一定的流程的, ...

  9. mysql中变量

    mysql中的变量: mysql中,有两种变量形式: 普通变量: 不带“@”符号: 定义形式: declare  变量名  类型名   [default  默认值]: //普通变量必须先这样定义 赋值 ...

  10. OGG内部进程介绍

    1.首先看看什么是OGG,以及OGG的用途       简单的来讲 Oracle Golden Gate (简称OGG)是一种基于日志的结构化数据复制备份软件,它通过解析源数据库在线日志或归档日志获得 ...