在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新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

  2. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  3. CSS3新增特性详解(二)

    上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian:  -webkit-tran ...

  4. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  5. CSS系列:CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  6. CSS3新增的选择器和属性

    <!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...

  7. CSS3新增伪类--好用的:target

      问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用cs ...

  8. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  9. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

随机推荐

  1. BZOJ.3052.[WC2013]糖果公园(树上莫队 带修改莫队)

    题目链接 BZOJ 当然哪都能交(都比在BZOJ交好),比如UOJ #58 //67376kb 27280ms //树上莫队+带修改莫队 模板题 #include <cmath> #inc ...

  2. CS1.6找金钱和人物血量

    一.查找金钱数量 先搜索800 然后购买东西,再搜索剩下的钱 然后发现有两个地址,一个绿色的地址(也就是静态地址),还有一个动态地址 经过测试后,静态地址的值是对应屏幕上的值,而真正实际的金钱是那个动 ...

  3. 【BZOJ-3672】购票 树分治 + 斜率优化DP

    3672: [Noi2014]购票 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 1177  Solved: 562[Submit][Status][ ...

  4. 【转载】VC GDI 像素转厘米(英寸)

    [转载]http://blog.sina.com.cn/s/blog_638dd78201018663.html 函数原型:int GetDeviceCaps(int nIndex); 常用的参数有( ...

  5. JS funtion()中URL不跳转后台action问题

    JS funtion()中URL不跳转后台action问题 今天遇到一个百思不得其解的问题,到现在解决了,但是仍然不知道所以然(估计是因为域名不一致导致的),记录一下 $.get(actionUrl, ...

  6. SuperPro 3000U 编程器电源部分

  7. AES CBC/CTR 加解密原理

    So, lets look at how CBC works first. The following picture shows the encryption when using CBC (in ...

  8. 项目内部IT/电商/信息化类简报,分享电子版

    除了一些国内不准发的内容,还有公司内部项目相关的.其他的大多数资料会在微信公众号推送,分享一下吧,希望大家也能推荐一些好文章. 微信公众号:WallinWind,原创IT类文章在CSDN博客也会同步更 ...

  9. MyEclipse使用总结——MyEclipse中配置WebLogic12c服务器

    MyEclipse中配置WebLogic12c服务器的步骤如下: [Window]→[Preferences],如下图所示: 找到WebLogic的配置,如下图所示:

  10. poj 2429 GCD &amp; LCM Inverse 【java】+【数学】

    GCD & LCM Inverse Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 9928   Accepted:  ...