css3 属性合集

boder-radius 圆角

语法：
* boder-radius: value 四个角
* boder-radius: value value 左上右下 右上左下
* boder-radius: value value value value （左上角 右上角 右下角 左下角）顺时针

详解：
boder-radius: value value value value / value value value value
水平方向 / 垂直方向

• 从指定角的顶端 向内部引出垂直半径 和水平半径
• 若水平半径和垂直半径相当于元素内部的一点为圆心
• 以改点为圆心 以垂直和水平半径画圆
• 与边框相交部分就是圆角

text-shadow 文字阴影

语法：
text-shadow: 阴影1 阴影2
阴影的格式：
第一个：横向偏移位置
第二个：纵向偏移位置
第三个： 模糊程度
第四个阴影的颜色

box-shadow 盒子阴影

语法：
box-shadow: 0px 0px 3px 20px red
第一个：横向偏移位置
第二个：纵向偏移位置
第三个： 模糊程度
第四个： 外延值
第五个阴影的颜色

• 内置阴影
  box-shadow: 10px 10px 10px inset #ccc;
  
• box-shadow :阴影一，阴影二，阴影三， 可以有多个阴影
  

过度 transition

什么是过度

使用css的属性值在一段时间内平滑的过度
	比如 鼠标悬停后 背景色在1s 内 由白色平滑的过度到红色

语法：
过度属性： background color
过度所需要时间
过度函数 即过度的速度、方式等
过度延迟时间 表示开始执行的时间

触发：通过用户的行为触发 如点击 悬浮等

过度时间
transition-duration: s | ms;
取值：
ease;默认值 规定慢速度开始 然后变快 然后慢速度结束的过度效果 linear ：匀速
ease-in 规定以慢速度开始 加速效果
easy-out 规定以慢速度结束 减速效果
easy-in-out 规定以慢速度开始和结束 先加速后减速效果

//注意合写时 第一个时间是 过度的时间 第二个时间是延迟时间
	#box {
		width:200px
		height:200px
		background-color:#1fb57b;
		transition:background 4s linear 1s;
	}
#box:hover {
	background-color:red
}

animation 动画

• 什么是 animation 动画
  aninmation 属性可以制作类似 Flash动画 通过关键帧控制动画的每一步 使元素从一种样式逐渐变化为另一种样式 实现复杂的动画效果

• animation 属性是一个简写属性

• 语法为 animation:none duration timing-function delay iteration-count direction

• 动画子属性
  animation-name: 调用动画 规定需要和keyframe的名字一致
  animation-duration: s | ms 动画完成一个周期所需要的时间
  animation-timing-function: 规定动画的速度变化l类型
  animation-delay: s| ms 播放之前的延迟时间