一、线性渐变
在CSS中部分属性需要添加浏览器前缀
-moz-:表示火狐内核浏览器
-webkit-:表示谷歌内核浏览器
-ms-:表示IE内核浏览器
-o-:表示欧朋(opera)内核浏览器
<style>
.div1{background-image:linear-gradient(to top,red,green);width:400px;height:180px;}
.div2{background-image:linear-gradient(45deg,red,green);width:400px;height:180px;}
.div3{background-image:-webkit-repeating-linear-gradient(-45deg,red,green,red 20%);width:400px;height:80px;
background-image:-moz-repeating-linear-gradient(-45deg,red,green,red 20%);width:400px;height:80px;
background-image:-ms-repeating-linear-gradient(-45deg,red,green,red 20%);width:400px;height:80px;
}
</style>
<div class="div1">普通线性渐变</div>
<div class="div2">角度线性渐变</div>
<div class="div3">重复线性渐变</div>
二、径向渐变
<style>
.div4{width:300px;height:80px;
background-image:-webkit-radial-gradient(10px 20px,red,green);/*谷歌浏览器*/
background-image:-moz-radial-gradient(10px 20px,red,green);/*火狐浏览器*/
background-image:-ms-radial-gradient(10px 20px,red,green);/*IE浏览器 其中10px 20px表示径向渐变的中心点*/
}
.div5{width:300px;height:80px;
background-image:-webkit-radial-gradient(center center,circle,red,green);/*谷歌浏览器*/
background-image:-moz-radial-gradient(center center,circle,red,green);/*火狐浏览器*/
background-image:-ms-radial-gradient(center center,circle,red,green);/*IE浏览器 其中circle表示径向渐变的形状，还可以是ellipse*/
}
.div6{width:300px;height:80px;
background-image:-webkit-repeating-radial-gradient(center center,circle,red,green,red 10%);/*谷歌浏览器*/
background-image:-moz-repeating-radial-gradient(center center,circle,red,green,red 10%);/*火狐浏览器*/
background-image:-ms-repeating-radial-gradient(center center,circle,red,green,red 10%);/*IE浏览器 其中circle表示径向渐变的形状，还可以是ellipse*/
}
</style>
<div class="div4">普通径向渐变</div>
<div class="div5">指定形状的径向渐变</div>
<div class="div6">重复径向渐变</div>
三、倒影
box-reflect：none | <direction> <offset>? <mask-box-image>?
<direction> = above | below | left | right
<offset> = <length> | <percentage>
<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值：none
适用于：所有元素
继承性：无
取值：
none：无倒影
<direction> Demo: 简单图片倒影 See with Webkit
above：指定倒影在对象的上边
below：指定倒影在对象的下边
left：指定倒影在对象的左边
right：指定倒影在对象的右边
<offset> Demo: 图片与倒影间隔 See with Webkit
<length>：用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值
<mask-box-image> Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit
none：无遮罩图像
<url>：使用绝对或相对地址指定遮罩图像。
<linear-gradient>：使用线性渐变创建遮罩图像。
<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。
.div6{-webkit-box-reflect:below 1px -webkit-linear-gradient(top,transparent 50%,#F00);}
<div class="div6"><img src="Hydrangeas.jpg" width="240" height="180"/></div>
四、旋转(transform)
transform:rotate(45deg); 旋转45度角，旋转中心在盒子的中心点
transform-origin:0 0; 指定旋转中心
<style>
.trans{width:200px;height:80px;background:red;
transform-origin:40,80;
transform:rotate(45deg);}
</style>
<div class=‘trans‘></div>
立方体旋转实例
<style>
.tran{width:200px;height:120px;
-webkit-transform-style:preserve-3d;
display:inline-block;
-webkit-animation: rotate 5s infinite;
animation: rotate 5s infinite;
-webkit-animation: rotate 5s infinite;
animation: rotate 5s infinite;
}
.tran div{width:100px;height:100px;border:1px solid #666;
position:absolute;}
.t1{-webkit-transform:translatez(50px);}
.t2{-webkit-transform:rotatey(180deg) translatez(50px);}
.t3 {
-webkit-transform: rotatey(90deg) translatez(50px);
transform: rotatey(90deg) translatez(50px);
}
.t4 {
-webkit-transform: rotatey(-90deg) translatez(50px);
transform: rotatey(-90deg) translatez(50px);
}
.t5 {
-webkit-transform: rotatex(90deg) translatez(50px);
transform: rotatex(90deg) translatez(50px);
}
.t6 {
-webkit-transform: rotatex(-90deg) translatez(50px);
transform: rotatex(-90deg) translatez(50px);
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotatey(0);
}
to {
-webkit-transform: rotatey(360deg);
}
}
</style>
<body>
<div class="tran">
<div class="t1">1</div>
<div class="t2">2</div>
<div class="t3">3</div>
<div class="t4">4</div>
<div class="t5">6</div>
<div class="t6">7</div>
</div>
五、用户界面
resize 设置用户可否调整盒模型宽高
resize:none 不允许用户调整高宽
resize:both 允许用户调整高和宽
resize:horizontal 允许用户调整宽度
resize:vartical 允许用户调整高度
user-select:none 不允许用户选择文本
鼠标指针
cursor:pointer 手型
六、过度(transition)
transition:background-color 1s ease-in 0.5s
第一个参数表示过度的属性，取值可以是单个属性也可以是none 不指定过度属性，all表示所有属性
第二个参数表示过渡时间
第三个参数表示过渡类型 linear(线性过渡)|ease(平滑过渡)|ease-in(由慢到快)|ease-out（由快到慢）
第四个参数表示延迟时间
七、动画(animation)
animation:yidong 2s ease-in 0.5s infinite reverse
第一个参数动画名称
第二个参数动画持续多长时间
第三个参数过渡类型
第四个参数延迟时间
第五个参数循环次数
第六个参数是否反向运动 reverse反方向运动|alternate 先正常运行，然后在反向交替运行
alternate-reverse先反向运行在正常运行然后交替运行
[email protected] yindong{
from{}
to{}
}
实例
<stytle>
.ani{
width:200px;height:80px;background:#666;
font-size:14px;
animation:yidong 5s ease-out infinite alternate;
}
@-webkit-keyframes yidong{
from{opacity:0;}
to{opacity:1;
transform:translate(20px);}
}
</style>
<div class="ani">这是一个动画</div>
七、多列
column:120px 3 120表示每列的宽 3表示总的列数
column-rule:dashed 5px blue
column-gap:10px 列之间的距离
column-fill:auto 以最高一列的高度为基准