假期修行11

今天继续CSS的学习 以下是学习内容
CSS3新特性
圆角 border-dadius
div{
width:500x;
height:50px;
background-color: red;
}

在div{}中加入border-dadius: 5px;后方框的角边缘 若有四个值 顺序为左上角 右上角 右下角 左下角 三个值 顺序为左上角 右上角和左下角 右下角 两个值 顺序为左上角和右下角 右上角和左下角 一个值 四个圆角值相同 阴影 box-shadow 值： h-shadow 必选 水平阴影的位置 v-shadow 必选 垂直阴影的位置 blur 可选 模糊距离 color 可选 阴影颜色 .box{ width: 400px; height: 400px; background-color: red; margin: 0 auto; （auto让方框左右空间平均分配） box-shadow: 0 0 10px rgba(0,0,0,0.5); (加入后有阴影) } 动画 @keyframes创建动画 @keyframes 名字 { 0%{ background-color: red; } 50%{ background-color: green; } 100%{ background-color: red; } } animation执行动画 值： name 设置动画名字 duration 设置动画持续时间 timing-function 设置动画效果的速率 值 ease 逐渐变慢（默认） linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速后匀速 delay 设置动画的开始时间（延时执行） iteration-count 设置动画循环的次数 infinite为无限循环 direction 设置动画播放的方向 值： normal （默认）表示向前播放 alternate 动画播放在第偶次向前播放 奇数次反方向播放 animation-play-state 设置动画的播放状态 running播放 paused停止播放 div { width: 200px; height: 200px; background-color: red; animation: 名字 3s linear 0 infinite; } 明天将继续学习CSS3的特性