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 播放之前的延迟时间