html5图像标签
<img>标签 定义网页中的图像 <img src="路径" alt="图片无法显示时展示的文字"/>
<figure>标签和<figcaption>标签 网页中添加插图
<figure>
<figcaption>文字</figcaption>
<img.....>
</figure>
css背景设置
background-color 背景颜色 red/#FF0000/rgba(255,0,0,0.5) 预定义颜色/十六进制颜色/红绿蓝透明度
background-image 背景图片 url 直接应用地址
background-repeat 背景平铺重复方向 repeat/no-repeat/repeat-x/repeat-y 横纵向平铺/不平铺/横向平铺/纵向平铺
background-attachment 背景图像随对象内容滚动还是固定 scroll/fixed 随对象滚动/固定
background-position 对象的背景图像位置 length|length或者position|position length:百分数|2.5cm position:top/center/buttom|left/center/right
background-size 背景图像尺寸 length/percentage/cover/contain 宽,高/以父元素的百分比设置宽高/完全覆盖/完全适应内容区域
盒阴影
{box-shadow:inset|5px|4px|10px|4px|#000}
投影方式内投影默认外投影|x轴偏移阴影在对象右边5px|y轴...|阴影模糊半径,边缘模糊|阴影扩展半径,延伸扩大4px|阴影颜色
css3渐变
线性渐变 background-image:liner-gradient left/100deg,#FF0000 0%,........ 自左向右/100度向外发散渐变(圆),渐变颜色 颜色边界,.....
径向渐变background-image:radial-gradient 100px,#FF0000 10%,...... 圆心坐标,(默认渐变椭圆)渐变颜色 颜色边界,.....
重复渐变 两种渐变前加repeating
css圆角边框
border-radius: 9px 9px 9px 9px (四个边角内切圆左上右上左下右下)
css3过渡
transition:property duration timimg-function delay;
property 应用过渡的属性名称 none/all/property 没有属性的获得过渡/所有获得默认/自定义
duration 过渡用时 time值(3s)
timing-function 过渡效果的时间曲线 ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier(n,n) 默认,慢到快最后慢结束/匀速/慢速开始/慢速结束/慢速开始和结束/自定义(0<n<1)
delay 等待时间 time值(1s)默认0
css3变形
transform:none/rotate(angle)/skew(x-angle,y-angle)/scale(x,y)/translate(x,y); 默认,无/旋转角度/倾斜角度/缩放/移动右下为正 2D
元素变形原点 transform-origin:left/right/center/length/%|top/center/buttom/length/%|length
rotate3d(x,y,z,angle) 旋转轴旋转角度 类似2D 3D
perspective(100px) 透视(深度)
@keyframes
@keyframes animationname{
0%/from{
动画状态
}
100%/to{
动画状态
}
}
animation
annimation:name duration timing-function delay iteration-count direction fill-mode plat-state;
名称 时间 速度曲线 延迟 播放次数默认1infinite无限 逆向播放normal正常alternate轮流反向播放 是否正在运行running默认正在播放 动画时间之外的状态 none默认不改变forwards保持最后一个属性值