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 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
jquery text()要注意啦
2009/10/30 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
jquery replace方法去空格
2017/05/08 jQuery
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
介绍一下JNDI的基本概念
2013/07/26 面试题
国家助学金获奖感言
2014/01/31 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
2019财务转正述职报告
2019/06/27 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python