css3

120 阅读25分钟

属性选择器

不论是自定义属性还是固有属性,都遵循属性选择器的使用。

  • p[custom]
<!--有custom属性的p标签,不论有没有属性值-->
p[custom] {
	background-color: #ff0;
}
<p custom="three">张三</p>
<p custom="three">张三</p>
<p custom="four">李四</p>
<p custom="five">王五</p>
<p custom="six">赵六</p>
<p custom="">custom属性没有值</p>
<p>没有custom属性</p>


  • p[custom=three]
p[custom=three] {
	background-color: #ff0;
}
<p custom="three">张三</p>
<p custom="three">张三</p>
<p custom="four">李四</p>
<p custom="five">王五</p>
<p custom="six">赵六</p>
<p custom="">custom属性没有值</p>
<p>没有custom属性</p>


  • p[custom~=like]
/* custom属性值中含有like的p标签 */
p[custom~=like] {
	background-color: #ff0;
}
<p custom="three like">张三</p>
<p custom="three like">张三</p>
<p custom="four">李四</p>
<p custom="five">王五</p>
<p custom="six">赵六</p>


  • p[custom^=t]
/* custom属性以t开头的p标签 */
p[custom^=t] {
	background-color: #ff0;
}
<p custom="three like">张三</p>
<p custom="three like">张三</p>
<p custom="four">李四</p>
<p custom="five">王五</p>
<p custom="six">赵六</p>


  • p[custom$=m]
/* custom属性以m结束的p标签(注意这里是区分大小写的) */
p[custom$=m] {
	background-color: #ff0;
}
<p custom="three like">张三</p>
<p custom="three like">张三</p>
<p custom="four">李四</p>
<p custom="fiveM">王五</p>
<p custom="sixm">赵六</p>


  • p[custom*=e]
/* custom属性值中含有e的p标签(字母分大小写) */
p[custom*=e] {
	background-color: #ff0;
}
<p custom="three like">张三</p>
<p custom="three like">张三</p>
<p custom="four">李四</p>
<p custom="five">王五</p>
<p custom="sixE">赵六</p>


  • p[custom|=a]
/* custom属性值以a开头的p标签 */
p[custom|=a] {
	background-color: #ff0;
}
<p custom="like a-three">张三</p>
<p custom="athree">张三</p>
<p custom="a-four">李四</p>
<p custom="a-five">王五</p>
<p custom="six">赵六</p>

结构选择器

  • nth-child(1)
/* 第一个p元素,从1开始计数 */
p:nth-child(1){
	background: pink;
}
<div>
	<p>张三</p>
	<p>李四</p>
	<p>王五</p>
	<p>赵六</p>
</div>


  • 奇数行和偶数行
/* 奇数行 */
p:nth-child(odd){
	background: pink;
}
/* 偶数行 */
p:nth-child(even){
	background: #ff0;
}
<p>张三</p>
<p>李四</p>
<p>王五</p>
<p>赵六</p>


  • nth-child(2n) nth-child(2n-1)
/* css3中,n是从1开始到正无穷的正数,所以2n是2,4,6,8...... */
p:nth-child(2n){
	background: pink;
}
/* 2n-1是1,3,5,7...... */
p:nth-child(2n-1){
	background: #ff0;
}
<div>
	<p>张三</p>
	<p>李四</p>
	<p>王五</p>
	<p>赵六</p>
</div>


  • nth-child(2) nth-child(3)
/* p标签父级元素下寻找第二个子节点,如果这个节点是p标签,那么就被选中,如果这个节点不是p标签,则忽略 */
p:nth-child(2){
	background: pink;
}
p:nth-child(3) {
	background: #ff0;
}
<div>
	<p>张三</p>
	<h2>这是h2标签</h2>
	<p>李四</p>
	<p>王五</p>
	<p>赵六</p>
</div>


  • *:nth-child(2)
/* div下第二个子元素被选中,这个元素不论是什么元素都被选中 */
div *:nth-child(2){
	background: pink;
}
<div>
	<p>张三</p>
	<h2>这是h2标签</h2>
	<p>李四</p>
	<p>王五</p>
	<p>赵六</p>
</div>


  • nth-last-child 同理 nth-child
p:nth-last-child(2n){
	background: pink;
}
<div>
	<p>张三</p>
	<h2>这是h2标签</h2>
	<p>李四</p>
	<p>王五</p>
	<p>赵六</p>
</div>


  • nth-of-type(2)
/* p元素父级下的第二个p元素 */
p:nth-of-type(2){
	background: pink;
}
<div>
	<p>张三</p>
	<h2>这是h2标签</h2>
	<p>李四</p>
	<p>王五</p>
	<p>赵六</p>
</div>


  • nth-last-of-type(2)
/* p元素父级下的倒数第二个p元素 */
p:nth-last-of-type(2){
	background: #ff0;
}
<div>
	<p>张三</p>
	<p>李四</p>
	<p>王五</p>
	<h2>这是h2标签</h2>
	<p>赵六</p>
</div>


  • p:empty
p {
	height: 20px;
}
/* 没有子节点的p元素 */
p:empty {
	background-color: pink;
}
<p><span></span></p>
<p>内容</p>
<p></p>


  • only-of-type
/* p元素父级下唯一的div元素 */
p:only-of-type {
	background-color: pink;
}
/* div元素父级下唯一的div元素 */
div:only-of-type {
	background-color: pink;
}
<p>段落</p>
<p>段落</p>
<div>文字</div>


  • only-of-type
/* 筛选出body元素下标签类型只有一个的元素 */
body *:only-of-type {
	background-color: pink;
}
<p>段落</p>
<p>段落</p>
<span>文字</span>


  • not
/* 选取div元素,其中不包括类名为aaa的div元素 */
div:not(.aaa){
	background: pink;
}
<div><span>文字</span></div>
<div class="aaa"><p>段落</p></div>


  • +相邻的兄弟节点,~后面所有的兄弟节点
/* 在这里+span也可以   +相邻的兄弟节点,~后面所有的兄弟节点 */
input:checked ~span {
	color: #f00;
}
<label for="male">
    <input type="radio" name="sex" id="male" />
    <span></span>
</label>
<label for="female">
    <input type="radio" name="sex" id="female" />
    <span></span>
</label>
// 选中的那个选项边框变红

锚点

<a href="#div01">div01</a>
<div id="div01"></div>

输入框状态

input:enabled {
	border-color: #f00;
}
input:disabled {
	border-color: #999;
}
<input type="text"/>
<input type="text" disabled="disabled"/>

rgba

background color border text-shadow 中都可以设置rgba格式 background text-shadow 均可设置多值

text-shadow

  • 如果字体模糊半径特别大,都可以直接当成有模糊颜色的背景了
h2 {
    text-shadow: 0 0 10px #333;
}
<h2>前端大世界</h2>
// 标题出现阴影,xy轴偏移量为0,模糊半径是10像素。


  • 浮雕效果
h2 {
    color: #fff;
    text-shadow: 0 0 10px #333;
}
<h2>前端大世界</h2>


  • text-shadow可以设置多值
//text-shadow中的顺序在文字上的z-index是递减的,而text-shadow设置太多层,页面会卡
h2 {
	text-shadow: -5px  -10px 10px #333,
		   -10px 2px 2px #f00,
		   10px -2px 2px #ff0;
}
<h2>前端大世界</h2>

字体填充

  • -webkit-text-stroke (IE不兼容这个属性)
// 字体被填上3像素的红色的边,方向从外向里,字体整体大小粗细不变
h2 {
	-webkit-text-stroke:3px #f00;
}
<h2>前端大世界</h2>


  • direction: rtl;
p {
	width: 300px;
	background: pink;
	direction: rtl;
}
<p>今日阳光明媚</p>
// 文字整体从右边开始


  • direction: rtl;unicode-bidi: bidi-override;
p {
	width: 300px;
	background: pink;
	direction: rtl;
	unicode-bidi: bidi-override;
}
<p>今日阳光明媚</p>

box-shadow

  • box-shadowtext-shadow一样,可以有多个值
.wrap {
	margin: 100px 0 0 100px;
	width: 100px;
	height: 20px;
	box-shadow: 0 0 30px 30px #666;
}
<div class="wrap"></div>
// 边框为30像素,再开始绘制模糊半径为30px的阴影

box-relect 倒影

  • box-reflect
img {
	/* direction 方向 above|below|left|right */
	/* 距离 */
	/* 渐变(可选) */
	-webkit-box-reflect: right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);
}
<img src="img/jzz.jpg"/>

文字过长显示省略号

  • text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

css3伪类

  • target
/* 锚点,选中的那个元素 */
.div-wrap:target {
	background-color: pink;
}
<a href="#div01">div01</a>
<a href="#div02">div02</a>
<div id="div01" class="div-wrap">div01区域</div>
<div id="div02" class="div-wrap">div02区域</div>
// 点击链接,相应的div其余有背景色


  • first-line first-letter
p {
	width: 100px;
}
/* 第一行 */
p:first-line {
	background-color: pink;
}
/* 第一个字 */
p:first-letter {
	font-size: 30px;
}
<p>这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这</p>


  • selection
p {
	width: 100px;
}
/* 匹配到被用户选取的部分 */
p::selection {
	background-color: #f00;
	color: #fff;
}
<p>这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这</p>

css3分栏布局

  • column-width 栏目宽度
.wrap {
	width: 900px;
	border: 1px solid #ccc;
	text-indent: 2em;
	-webkit-column-width:50px;	
}
<div class="wrap">
    <p>日前,威海市在山东率先推行“一窗式”“一门式”政务服务模式改革,积极推动实现企业和群众在政务服务中心办同一件事只需一个窗口的目标,最大限度让		企业和群众少跑腿、好办事、快办事。</p>
    <p>所谓“一窗式”政务服务模式,就是重新整合市、县两级政务服务中心窗口设置,把各个部门内部依照申请政务服务事项向行政审批科集中、行政审批科成建制		向政务服务中心集中,做到科室设立到位、人员配备到位、事项进驻中心到位、授		权窗口到位。市、县两级政务服务中心推行前台综合受理、后台分类审批、统一窗		口出件的“一窗式”政务服务模式,让企业和群众办同一件事只需一个窗口。</p>
    <p>截至目前,“一窗式”政务服务模式改革已初见成效。威海市与各区市政务服务中心已全部完成建设工程项目模块化审批和市场主体设立后置许可事项跟踪联		办两个“一窗式”综合受理窗口的设置,并已投入试运行。</p>
    <p>此外,“一门式”政务服务模式改革也在加速推行。按照县级统筹、平台统一、标准统一和业务统办的模式,威海市统一规范镇级便民服务中心建设,把劳动就业、		计划生育、社会保险救助、农村医疗及涉农补贴、公安户籍办理等与基层群众生产		生活密切相关的服务事项,全部纳入便民服务中心集中办理。打破了原来分部门派		驻窗口工作人员的做法,由窗口统派固定工作人员。窗口工作人员统办进驻便民服		务中心所有业务,真正实现“一窗口”办所有事,解决镇政府(街道办)干部身兼		数职坐岗难、群众办事找不着人的问题。</p>
    <p>据悉,为充分发挥“一窗式”“一门式”服务改革的效能,威海市政务服务中心管理办将在升级完善政务服务平台功能的同时,拟将市县两级所有依申请类非涉		密政务服务事项,全部集中到政务服务中心实体大厅和网上大厅集中办理。</p>
</div>
// 在div中,内容进行分栏,栏目宽度为50px


  • column-count 栏目数
  • column-gap 栏目间隔
  • column-rule 栏目分割线
.wrap {
	width: 900px;
	border: 1px solid #ccc;
	text-indent: 2em;
	-webkit-column-count: 4;
	-webkit-column-gap: 50px;
	-webkit-column-rule: 1px solid #ccc;
}
<div class="wrap">
    <p>日前,威海市在山东率先推行“一窗式”“一门式”政务服务模式改革,积极推动实现企业和群众在政务服务中心办同一件事只需一个窗口的目标,最大限度让		企业和群众少跑腿、好办事、快办事。</p>
    <p>所谓“一窗式”政务服务模式,就是重新整合市、县两级政务服务中心窗口设置,把各个部门内部依照申请政务服务事项向行政审批科集中、行政审批科成建制		向政务服务中心集中,做到科室设立到位、人员配备到位、事项进驻中心到位、授		权窗口到位。市、县两级政务服务中心推行前台综合受理、后台分类审批、统一窗		口出件的“一窗式”政务服务模式,让企业和群众办同一件事只需一个窗口。</p>
    <p>截至目前,“一窗式”政务服务模式改革已初见成效。威海市与各区市政务服务中心已全部完成建设工程项目模块化审批和市场主体设立后置许可事项跟踪联		办两个“一窗式”综合受理窗口的设置,并已投入试运行。</p>
    <p>此外,“一门式”政务服务模式改革也在加速推行。按照县级统筹、平台统一、标准统一和业务统办的模式,威海市统一规范镇级便民服务中心建设,把劳动就业、		计划生育、社会保险救助、农村医疗及涉农补贴、公安户籍办理等与基层群众生产		生活密切相关的服务事项,全部纳入便民服务中心集中办理。打破了原来分部门派		驻窗口工作人员的做法,由窗口统派固定工作人员。窗口工作人员统办进驻便民服		务中心所有业务,真正实现“一窗口”办所有事,解决镇政府(街道办)干部身兼		数职坐岗难、群众办事找不着人的问题。</p>
    <p>据悉,为充分发挥“一窗式”“一门式”服务改革的效能,威海市政务服务中心管理办将在升级完善政务服务平台功能的同时,拟将市县两级所有依申请类非涉		密政务服务事项,全部集中到政务服务中心实体大厅和网上大厅集中办理。</p>
</div>
// 在div中,内容进行分栏,分为4栏,栏目间隔为50px,栏目分割线为1px solid #ccc

resize自由缩放

resize: both; overflow: auto;

  • both 水平垂直都可以缩放
  • horizontal 只有水平方向可以缩放
  • vertical 只有垂直方向可以缩放
  • 注意:一定要配合overflow: auto一块使用
.wrap {
	width: 100px;
	height: 100px;
	background: pink;
	border: 1px solid #ddd;
	resize: both;
	overflow: auto;
}
<div class="wrap"></div>
// wrap可以自由缩放

响应式

// 实现自适应
// 当屏幕宽度大于800px时,使用a.css文件
// 当屏幕宽度在400px到800px之间时,使用b.css文件
// 当屏幕宽度小于400px时,使用c.css文件
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/a.css" media="screen and (min-width:800px)">
<link rel="stylesheet" type="text/css" href="css/b.css" media="screen and (min-width:400px) and (max-width:800px)">
<link rel="stylesheet" type="text/css" href="css/c.css" media="screen and (max-width:400px)">
// 当屏幕宽高比大时(横屏效果),使用a.css文件
// 当屏幕宽高比小时(竖屏效果),使用b.css文件
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/a.css" media="all and (orientation:portrait)">
<link rel="stylesheet" type="text/css" href="css/b.css" media="all and (orientation:landscape)">
@media screen and (min-width:600px) {	
    //当屏幕宽度大于600px时,使用大括号内的样式
	div {
		background-color: #f00;
	}
}
@media screen and (max-width:600px) {	
    //当屏幕宽度小于600px时,使用大括号内的样式
	div {
		background-color: #0f0;
	}
}
div {
	margin: 10px;
	width: 100px;
	height: 100px;
}
<div></div>

border-radius

div {
	margin: 10px;
	width: 100px;
	height: 100px;
	background-color: #f00;
	/* border-radius控制每个分角的写法 */
	border-radius: 20px 40px 60px 80px/10px 20px 30px 40px;
}
<div></div>


  • 用border-radius制作花瓣效果
div {
	margin: 10px;
	width: 100px;
	height: 100px;
	background-color: #f00;
	border-radius: 0 50%;
}
<div></div>

弹性盒模型

使用弹性盒模型时,父元素必须加上display:boxdisplay:inline-block

  • box-orient box-direction
.wrap {
	display: -webkit-box;	/* 父元素box */
	width: 900px;
	height: 400px;
	background-color: pink;
	-webkit-box-orient: horizontal; /* 盒子内的元素水平布局 */
	-webkit-box-direction: reverse; /* 元素排列顺序 */
}
/* horizontal 水平布局 vertical 垂直布局
normal 正序 reverse 反序 */
.unit {
	width: 100px;
	height: 100px;
	background-color: #00f;
	color: #fff;
}
<div class="wrap">
    <div class="unit">1</div>
    <div class="unit">2</div>
    <div class="unit">3</div>
    <div class="unit">4</div>
    <div class="unit">5</div>
</div>


  • box-ordinal-group
.wrap {
	display: -webkit-box;
	width: 900px;
	height: 400px;
	background-color: pink;
}
.unit {
	width: 100px;
	height: 100px;
	background-color: #00f;
	color: #fff;
}
.unit:nth-of-type(1) {
	-webkit-box-ordinal-group:2;  /* box-ordinal-group 设置元素的具体位置 */
}
.unit:nth-of-type(2) {
	-webkit-box-ordinal-group:4;
}
.unit:nth-of-type(3) {
	-webkit-box-ordinal-group:1;
}
.unit:nth-of-type(4) {
	-webkit-box-ordinal-group:5;
}
.unit:nth-of-type(5) {
	-webkit-box-ordinal-group:3;
}
<div class="wrap">
    <div class="unit">1</div>
    <div class="unit">2</div>
    <div class="unit">3</div>
    <div class="unit">4</div>
    <div class="unit">5</div>
</div>


  • box-flex
.wrap {
	display: -webkit-box;
	width: 900px;
	height: 400px;
	background-color: pink;
}
.unit {
	width: 100px;
	height: 100px;
	background-color: #00f;
	color: #fff;
}
/* box-flex 定义盒子的弹性空间 */
/* 子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子	元素的box-flex属性值的和 */
.unit:nth-of-type(1) {
	-webkit-box-flex:1;
}
.unit:nth-of-type(2) {
	-webkit-box-flex:2;
}
.unit:nth-of-type(3) {
	-webkit-box-flex:3;
}
.unit:nth-of-type(4) {
	-webkit-box-flex:4;
}
.unit:nth-of-type(5) {
	-webkit-box-flex:5;
}
<div class="wrap">
    <div class="unit">1</div>
    <div class="unit">2</div>
    <div class="unit">3</div>
    <div class="unit">4</div>
    <div class="unit">5</div>
</div>


  • box-align
/* box-align 在垂直方向上对元素的位置进行管理 */
/* star 所有子元素居顶
end 所有子元素居底
center 所有子元素居中 */
.wrap {
	display: -webkit-box;
	width: 900px;
	height: 400px;
	background-color: pink;
	-webkit-box-align: center;
}
.unit {
	width: 100px;
	height: 100px;
	background-color: #00f;
	color: #fff;
}
<div class="wrap">
    <div class="unit">1</div>
    <div class="unit">2</div>
    <div class="unit">3</div>
    <div class="unit">4</div>
    <div class="unit">5</div>
</div>

过渡

transition

  • transition-property 要运动的样式(all | [attr] | none)
  • transition-duration 运动时间
  • transision-delay 延迟时间
  • transition-time-function 运行形式

ease (逐渐变慢)默认值

  • linear 匀速
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速
  • cubic-bezier 贝塞尔曲线(x1,y1,x2,y2)
div {
	width: 100px;
	height: 100px;
	background-color: #f00;
	/* transition只对属性width的变化起作用 */
	transition: 1s width;	
}
div:hover {
	background-color: #00f;
	width: 200px;
	height: 200px;
}
<div></div>
// 鼠标移上去,div的高度立马变化,而宽度会有1秒的过渡时间来变化


  • transition多重属性
div {
	width: 100px;
	height: 100px;
	background-color: #f00;
	transition: .5s width,
			 2s height;
}
div:hover {
	background-color: #00f;
	width: 200px;
	height: 200px;
}
<div></div>
// 鼠标移上去,div宽度花0.5秒时间来变化,高度花2s时间来变化


  • 延迟
div {
	width: 100px;
	height: 100px;
	background-color: #f00;
	transition: .5s width,
			 2s 1s height;
}
div:hover {
	background-color: #00f;
	width: 200px;
	height: 200px;
}
<div></div>
// 鼠标移上去后,div宽度花0.5秒时间完成变化,然后等待1s,高度花2s时间完成变化

过渡完成事件

  • webkit内核 obj.addEventListener(‘WebkitTransitionEnd’,function(){},false);
  • firefox obj.addEventListener(‘transitionend’,function(){},false);
/**
div {
	width: 100px;
	height: 100px;
	background-color: #f00;
	transition: 1s;
}
*/
<div id="box"></div>
var oBox = document.getElementById("box");
oBox.onclick = function () {
	this.style.width = this.offsetWidth+100+"px";
}
addEnd(oBox, function () {
	alert("end");
});
function addEnd (obj,fn) {
	obj.addEventListener('WebkitTransitionEnd', fn, false);
	obj.addEventListener('transitionend', fn, false);
}
// 当点击div时,div的宽度花1s时间增加100px,结束后弹出“end”

运行结果:(Chrome和Firefox运行情况相同)

transform

  • transform
div {
	margin: 100px;
	width: 100px;
	height: 100px;
	background-color: #f00;
	transition: 1s;
}
div:hover {
	transform: rotate(30deg);
}
<div></div>
// 鼠标移入顺时针旋转30度


  • transform-origion 旋转的基点
div {
	width: 100px;
	height: 100px;
	margin: 100px;
	background-color: #f00;
	transition: 1s;
	transform-origin: right;
}
div:hover {
	transform: rotate(30deg);
}
<div></div>
// 以div右边为基线逆时针旋转30度


div {
	width: 100px;
	height: 100px;
	margin: 100px;
	background-color: #f00;
	transition: 1s;
	transform-origin: right top;
}
div:hover {
	transform: rotate(30deg);
}
<div></div>
// 以div右上角为基准点逆时针旋转30度

同理,div中设置transform-origin: 70px 30px;表示基准点为div的70px/30px


  • skewXskewY
div {
	width: 100px;
	height: 100px;
	background-color: #f00;
	transition: 1s;
}
div:hover {
	/* skewY纵向发生扭曲(斜切) */
	transform: skewX(30deg);
}
<div></div>
// 鼠标移入横向扭曲30度


div {
	width: 100px;
	height: 100px;
	background-color: #f00;
	transition: 1s;
}
div:hover {
	transform: skew(15deg,30deg);
}
<div></div>
// 鼠标移入横向和竖向都发生扭曲


div {
	width: 100px;
	height: 60px;
	margin: 100px;
	background-color: #f00;
	transition: 1s;
	color: #fff;
	font-size: 20px;
	line-height: 60px;
	text-align: center;
	font-family: "Microsoft Yahei";
	transform: skew(-30deg);
}
p {
	transform: skew(30deg);
}
<div><p>文字</p></div>
// div为菱形,其中的文字是正的


  • scale scaleX scaleY
.box {
	width: 100px;
	height: 100px;
	margin: 100px;
	background-color: #f00;
	transition: 1s;
}
.box:hover {
	transform: scaleX(2);
}
<div class="box"></div>
// 鼠标移入,div宽度变为原来的两倍


  • translate
.box {
	width: 100px;
	height: 100px;
	margin: 100px;
	background-color: #f00;
	transition: 1s;
}
.box:hover {
	transform: translateY(100px);
}
<div class="box"></div>
// 鼠标移入,div向下移动100px


  • 复合属性位置引起的改变
.wrap {
	margin: 10px;
	width: 600px;
	height: 500px;
	border: 1px solid #aaa;
}
.box {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #f00;
	transition: 1s;
}
.box:nth-child(1) {
	margin: 60px 0 0 100px;
}
.box:nth-child(2) {
	margin: 200px 0 0 100px;
}
.wrap:hover .box:nth-child(1) {
	/* 先缩小再移动100px(移动和缩放的动画效果看似同步,结果不一样) */
	transform: translateX(100px) scale(0.5);
}
.wrap:hover .box:nth-child(2) {
	/* 先移动100px再缩小(移动和缩放的动画效果看似同步,结果不一样) */
	transform: scale(0.5) translateX(100px);
}
<div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
</div>
// 鼠标移入,第一个box移动的距离比第二个box移动的距离远一些,复合属性中位序不同,导致的结果也不同
// 因此对于transform,写复合属性时,先执行后面的 

2D矩阵变换

  • matrix(a,b,c,d,e,f)矩阵函数,默认是matrix(1,0,0,1,0,0) 对于其兼容IE9以下IE版本只能通过矩阵来实现,有一段专门针对IE的filter代码,百度即可。

3d变换

  • transform-style(preserve-3d) 建立3d空间(次外层)
  • perspective 景深(最外层)
  • perspective-origin 景深基点(最外层)
  • backface-visibility 隐藏背面
  • transform 新增函数

rotateX() rotateY() rotateZ() translateZ() scaleZ()

动画相关

  • animation-play-state 播放状态(running 播放,paused 暂停)
  • animation-direction 属性定义是否应该轮流反向播放动画 normal| alternate
  • obj.addEventListener(‘webkitAnimationEnd’,function(){},false)

元素做3d空间变换,其原本本身占据的空间是不变的

.wrap {
     background-color: #f00;
     transform-style: preserve-3d;
}
.box {
     width: 100px;
     height: 100px;
     transform: rotateX(40deg);
     background-color: #0f0;
}
<div class="wrap">
    <div class="box"></div>
</div>
// wrap的高度还是100px

渐变

  • linear-gradient([<起点> || <角度>,]? <点>, <点>...)
  • 只能用在背景上 —— IE有特殊的写法,filter
  • 参数

起点:从什么方向开始渐变 lefttop 默认top
角度:从什么角度开始渐变 xxxdeg
点:渐变色的颜色和位置 black 50%,位置可选

.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background-image: -webkit-linear-gradient(left,red,blue);
}
<div class="box"></div>


.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background-image: -webkit-linear-gradient(0deg,red,blue);
}
<div class="box"></div>


.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background-image: -webkit-linear-gradient(60deg,red,blue);
}
<div class="box"></div>
// 从div的左侧开始,向右从红色渐变为蓝色,整体效果逆时针旋转60度即为显示效果


.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background-image: -webkit-linear-gradient(left top,red,blue);
}
<div class="box"></div>


.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background-image: -webkit-linear-gradient(0,red 30px,blue 100px);
}
<div class="box"></div>
// 从div左侧开始向右,到30px处还是纯红,开始渐变为蓝色,到100px处为纯蓝


.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background-image: -webkit-linear-gradient(60deg,red 30px,blue 100px);
}
<div class="box"></div>
// 将上一个例子中的效果逆时针旋转60度即为显示效果


  • repeating-linear-gradient 重复
.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
	background-image: -webkit-repeating-linear-gradient(left,green 0,green 10px,#fff 10px,#fff 20px);
	transition: 1s;
}
.box:hover {
	background-position: 100px 0;
}
<div class="box"></div>
// 鼠标移入,div的条纹发生移动,类似加载的gif效果


  • 适配IE浏览器的线性渐变 filter
.box {
	width: 100px;
	height: 100px;
	background: -webkit-linear-gradient(red,blue);
	background: -moz-linear-gradient(red,blue);
	background: linear-gradient(red,blue);
	/* GradientType值为1表示从左到右,值为0表示从上到下 */
	/* startColorstr和endColorstr的值只能是颜色的字符串形式,16进制不可行 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr="blue",GradientType='1');
}
<div class="box"></div>
// div块在IE浏览器下从左向右由红色渐变为蓝色
  • radial-gradient([<起点>]?[<形状>||<大小>]?<点>,<点>...);
  • 起点:可以是关键字(lefttoprightbottom),具体数值或百分比
  • 形状:ellipsecircle
  • 大小:具体数值或百分比,也可以是关键字(最近端,最近角,最远端,最远角,包含或覆盖(closest-sideclosest-cornerfarthest-sidefarest-cornercontain or cover))
  • 注意 -- firefox目前只支持关键字

  • 径向渐变
.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background: -webkit-radial-gradient(red,blue);
}
<div class="box"></div>
// div从中心向周围进行颜色扩散,从红色渐变为蓝色


.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background: -webkit-radial-gradient(left top,red,blue);
}
<div class="box"></div>
// div从左上角向右下角进行从红色到蓝色的渐变


.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background: -webkit-radial-gradient(100px 50px,red,blue);
}
<div class="box"></div>
// div在100px/50px的位置上向周围进行颜色扩散


.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	background: -webkit-radial-gradient(100px 50px,red 30px,blue 30px);
}
<div class="box"></div>
// 在100px/50px的位置上,出现纯红色半圆,其他部分是纯蓝色


.box div {
	float: left;
	margin: 10px;
	width: 100px;
	height: 100px;
}
.box div:nth-child(1){
	background: -webkit-radial-gradient(100px 50px,closest-side,red,blue);
}
.box div:nth-child(2){
	background: -webkit-radial-gradient(100px 50px,closest-corner,red,blue);
}
.box div:nth-child(3){
	background: -webkit-radial-gradient(100px 50px,farthest-side,red,blue);
}
.box div:nth-child(4){
	background: -webkit-radial-gradient(100px 50px,farthest-corner,red,blue);
}
.box div:nth-child(5){
	background: -webkit-radial-gradient(100px 50px,contain,red,blue);
}
.box div:nth-child(6){
	background: -webkit-radial-gradient(100px 50px,cover,red,blue);
}
<div class="box">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>


  • background-size:x,y
    cover 等比放大,填满容器,虽然会有超出
    contain 等比缩小,刚好将图片放在容器中,可能会留白
.box {
	margin: 100px;
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
	background: url(../img/jzz.jpg) no-repeat;
	background-size: 80px 60px;
}
<div class="box"></div>
// 通过设置background-size: 80px 60px;其背景大小变为80px*60px


  • background-sizebackground多值对应
.box {
	margin: 100px;
	width: 300px;
	height: 300px;
	border: 1px solid #ccc;
	background: url(../img/jzz.jpg) no-repeat,url(../img/zyh.jpg) no-repeat;
	background-size: contain,100% 100%;
}
<div class="box"></div>


background-origin:border|padding|content

  • border-box 从border区域开始显示背景
  • padding-box 从padding区域开始显示背景
  • content-box 从content区域开始显示背景

bacground-clip:border|padding|content|no-clip

  • border 从border区域向外裁剪背景
  • padding 从padding区域向外裁剪背景
  • content 从content区域向外裁剪背景
  • no-clip 从border区域向外裁剪背景

.box {
	margin: 100px;
	padding: 30px;
	width: 300px;
	height: 300px;
	background: url(../img/jzz.jpg);
	border: 30px solid rgba(0,0,0,0.3);
	/* 默认是border-box,背景图会贯穿border */
	background-clip: padding-box;
}
<div class="box"></div>
// 边框不会有任何背景图部分,背景图的显示好像忽略了padding


.box {
	margin: 100px;
	padding: 30px;
	width: 300px;
	height: 300px;
	background: url(../img/jzz.jpg);
	border: 30px solid rgba(0,0,0,0.3);
	background-clip: content-box;
}
<div class="box"></div>
// 背景图只存在于内容区域中,padding部分留白