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实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 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
咖啡常见的种类
2021/03/03 新手入门
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
员工自我鉴定
2013/10/09 职场文书
请假条的格式
2014/04/11 职场文书
股权转让协议书
2014/04/12 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2015年元旦标语大全
2014/12/09 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
对象析构函数__del__在Python中何时使用
2022/03/22 Python
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
Python加密与解密模块hashlib与hmac
2022/06/05 Python