css3中新增的样式使用示例附效果图


Posted in HTML / CSS onAugust 19, 2014

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

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

复制代码
代码如下:

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

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

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

3.简单的阴影

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

复制代码
代码如下:

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

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

尝试一下,你将看到下面演示的旋转图片效果。
css3中新增的样式使用示例附效果图 
box-shadow可以设置6个参数:
<length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④:如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
<color>:设置对象的阴影的颜色。
inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

4.元素变换

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

复制代码
代码如下:

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

鼠标滑过图片,它就会弹出并变大,如下所示。
css3中新增的样式使用示例附效果图 
将鼠标从图片上挪开,图片又会恢复原状。
css3中新增的样式使用示例附效果图 
我们来看一下transform各各参数意思:
复制代码
代码如下:

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

下节我们一起探讨动画(transition)和渐变(gradient)的使用
HTML / CSS 相关文章推荐
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 #HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 #HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 #HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 #HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 #HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 #HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 #HTML / CSS
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
PHP图片加水印实现方法
2016/05/06 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
单利模式及python实现方式详解
2018/03/20 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
北京华建集团SQL面试题
2014/06/03 面试题
高一生物教学反思
2014/01/17 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
会计人员演讲稿
2014/09/11 职场文书
python基础详解之if循环语句
2021/04/24 Python