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来绘制一个月食图案
Jul 18 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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实现微信扫码支付
2017/03/26 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
django 实现电子支付功能的示例代码
2018/07/25 Python
python实现杨氏矩阵查找
2019/03/02 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Python列表的切片实例讲解
2019/08/20 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
五好党支部事迹材料
2014/02/06 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
个人自荐书范文
2015/03/09 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫