CSS3 简介 (一)
来源:互联网 发布:网络ip冲突是什么意思? 编辑:程序博客网 时间:2024/06/05 11:38
1:对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。
2:CSS3 模块
(1)选择器
(2)盒模型
(3)背景和边框
(4)文字特效
(5)2D/3D转换
(6)动画
(7)多列布局
(8)用户界面
css3 新增的属性
border-image 设置所有边框图像的速记属性。 3
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3
box-shadow 附加一个或多个下拉框的阴影
CSS3 背景
(1)background-image
(2)background-size
(3)background-origin
(4)background-clip
CSS3 渐变(Gradients)
(1)线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
(2)径向渐变(Radial Gradients)- 由它们的中心定义
实例从上到下的线性渐变:#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */}
CSS3 文本效果
text-shadow
box-shadow
text-overflow
word-wrap
word-break
{ text-shadow: 5px 5px 5px #FF0000;}
CSS3 2D 转换
2D 转换
在本章您将了解2D变换方法:
translate()
rotate()
scale()
skew()
matrix()
div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */}
div{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */}
div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */}
-ms-transform:scale(2,3); /* IE 9 */-webkit-transform: scale(2,3); /* Safari */transform: scale(2,3); /* 标准语法 */
CSS3 3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中,您将学到其中的一些 3D 转换方法:
(1)rotateX()
(2)rotateY()
div{ transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */}
div{ transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */}
CSS3 过渡
CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素:
div{ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s;}
简写:
div{ transition: width 1s linear 2s; /* Safari */ -webkit-transition:width 1s linear 2s;}
- (一)CSS3简介
- CSS3 简介 (一)
- CSS3 (一) 简介
- CSS3 简介 (二)
- CSS3 简介 (三)
- CSS3选择器(一)
- CSS3(一)—— CSS3选择器
- css3简介
- css3简介
- CSS3学习笔记(一)
- CSS3属性笔记(一)
- css3学习笔记(一)
- css3学习笔记(一)
- 【读书笔记】CSS3学习(一)
- css/css3总结(一)
- CSS3的边框(一)
- css3 动画系列(一)
- css3选择器--分类(一)
- fitnesse在jenkins上运行相关配置
- 使用python3进行12306模拟登陆下单流程
- ejabberd分析(一)
- 《Java编程思想》学习笔记-第5章
- [转载]Cookie/Session机制详解
- CSS3 简介 (一)
- MTK方案上基于Android N拦截黑名单中的短/彩信的方法
- 虚拟机安装和虚拟机环境下安装Linux操作系统
- 结构体和数组
- 关于JSON最实用的代码(一)
- DSS 代码分析【SR包发送】
- Filebeat中文指南
- HashMap为什么线程不安全?浅析高并发情况下的HashMap
- Retrofit源码解析