css样式和html5（部分）

边框；border-radius/image

       border-radius:左上 右上 右下 左下; 圆角
        border-radius:左上 右上左下 右下
        border-radius:左上右下 右上左下
        box-shadow: X轴偏移 y轴偏移 阴影大小 颜色;边框阴影
        box-shadow: X轴偏移 y轴偏移 颜色;
        border-image设置边框图片

背景；background
         background-image: url(image/2.png),url(image/1.png)设置多张背景图片; 
        background-size:contain指的是一个100%,cover设置2个百分百不会变形;
        background-origin指定背景图片的位置区域
        border-box边框区域
        content-box内容区域
        padding-box内边框区域
        background-clip裁剪指定区域 

渐变；线性渐变与径向渐变

        线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
         background-image: linear-gradient(pink,#000);
         to 。。。所需要渐变的方向
         默认情况从上往下渐变
         background-image: linear-gradient(to left,pink,#000);
         从右到左
         background-image: linear-gradient(to right,pink,#000);
         从左到右
         background-image: linear-gradient(to left top,pink,#000);
         从右下到左上
         background-image: linear-gradient(30deg,orange,#000);
         设置任意的角度，角度单位为deg，可以设置负值
         径向渐变（Radial Gradients）- 由它们的中心定义
         background-image: radial-gradient(orange,#000);
         默认值，由中心向外径向渐变
         background-image: radial-gradient(orange 40px,#000 95%);
         设置径向的颜色占比
         ellipse椭圆
         circle 圆形

文本

         text-shadow文字阴影
         box-shadow盒子阴影
         text-overflow文本溢出显示的内容
         clip不显示省略文本，默认值
         ellipsis显示省略文本
         word-wrap文本换行
         word-break 
         word-break: break-all;使英文字母换行
         word-break: keep-all;使空格和连字符换行

设置单行省略号 ；
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden; 
  设置多行省略号 ；
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                word-wrap: break-word; 
     

2D转换

     transform属性
         transform: translate(20px,50px)在浏览器中X轴和Y轴上的距离
         两个值之间用逗号隔开
         translate移动
         transform: rotate(30deg);可以设置元素旋转，正值沿顺时针旋转，负值则相反
         旋转角度单位是deg,不能使用px
         rotate旋转
         transform: scale(1,2);设置元素缩放，缩放打下由X和Y值决定缩放的比例
         如果为负值呈现相反对立方向缩放
         scale缩放
         transform: skew(20deg,30deg);设置元素在X轴和Y轴上倾斜，正值为顺时针，负值则相反
         设置一个值时，代表X轴倾斜，Y轴默认为0
         skew倾斜
         transform: matrix(1,2,-2,1,0,0);
                          X缩放,Y轴倾斜,X轴倾斜,Y轴缩放,X轴平移,Y轴平移
         matrix 2D所有属性值缩写形式
          transform-origin更改旋转的中心点
          可以设置上下左右，center,px,%
          transform-origin: left top;-->
          <!-- transform-style: preserve-3d;设置元素呈现3D效果
           perspective透视,值越小，元素越大（越近）
           perspective-origin设置透视中心点的位置区域
           backface-visibility: visible;背对元素是否可见，默认是可见状态，如需要设置不可见，设置值为hidde 

注：设置单独X轴或Y轴时，不能一起使用，否则会导致最后一个轴有效果， 如果既要设置X又要设置Y请使用列如rotate   

过渡

         transition:css属性名称  时间(s,ms 1s=1000ms) 曲线运动 规定  开始  运动时间 
         ease    规定慢速开始，然后变快，然后慢速结束的过渡效果
         ease-in    规定以慢速开始的过渡效果
         ease-out    规定以慢速结束的过渡效果
         ease-in-out    规定以慢速开始和结束的过渡效果
         linear    规定以相同速度开始至结束的过渡效果  

动画

 第一步创建动画 
            需要绑定一个css名称 
            from...to开始到结束的动画 
            from...to指的是0%...100%

@keyframes创建动画

简写；animation: name duration timing-function 
         delay iteration-count 
         direction fill-mode play-state

animation-name: name;设置动画名称 
         animation-duration: 2s;设置动画运动的时间
         animation-timing-function: ease;设置动画的运动曲线
         ease    规定慢速开始，然后变快，然后慢速结束的过渡效果
         ease-in    规定以慢速开始的过渡效果
         ease-out    规定以慢速结束的过渡效果
         ease-in-out    规定以慢速开始和结束的过渡效果
         linear    规定以相同速度开始至结束的过渡效果
         animation-fill-mode: forwards;设置运动后所停留的位置
         none默认值
         forwards最后一帧动画暂停位置
         backwards第一帧动画暂停位置
         both当前执行完动画后所停留的位置
         animation-delay: 2s;动画几秒后开始运动
         animation-iteration-count: 2;设置动画执行的次数
         infinite无限次
         animation-direction: normal;设置循环或反向执行动画
         normal默认值正常执行动画
         reverse反向执行动画
         alternate设置动画奇数次正向执行动画，偶数次反向执行动画
         alternate-reverse设置动画偶数次正向执行动画，奇数次反向执行动画
         animation-play-state: paused;设置动画是否执行动画或暂停动画
         注：可以实现轮播（原理）暂停和播放的功能
         paused暂停动画
         running执行动画

视频；video

         autoplay加载完成后自动播放
         controls显示播放进度条和按钮
         设置width宽度height高度可以添加单位，也可不加
         loop循环播放
         muted设置视频的音频静音
         poster设置视频未播放时第一张显示界面
         preload视频加载时就会开始播放，如果出现autoplay，就会忽略preload

<video src="./image/movie.mp4" width="300" height="200" poster="./image/1.png" controls muted>
			
</video>

音频；audio

         autoplay加载完成后自动播放
         controls显示播放进度条和按钮
         设置width宽度height高度可以添加单位，也可不加
         loop循环播放
         muted设置视频的音频静音

	<audio src="horse.mp3" >
			<source src="horse.mp3" type="audio/mp3">
		</audio>

inpue属性

  text文本 
        <input type="text">
   password密码      
        <input type="password">
    button按钮 
        <input type="button" value="按钮">
    number数字
        <input type="number">
     color颜色 
        <input type="color">
    submit提交 
        <input type="submit">
     date日期 
        <input type="date">
 datetime日期时间  只兼容苹果和opera
        <input type="datetime">
    datetime-local日期时间  兼容谷歌 
        <input type="datetime-local">
     email邮箱 
        <input type="email">
     month日期---月 
        <input type="month">

disabled禁止状态
        <input type="button" disabled value="按钮">
        <!-- max最大输入值为XX,搭配number类型使用
         min最小值为XX
        <input type="number" max="10" min="5">
         maxlength最大输入长度为XX
         minlength最小输入长度为XX-
        <input type="text" maxlength="10" minlength="5">

pattern设置正则表达式
         pattern="[A-Za-z]{3}"验证只能输入大写与小写的a-z,
         并且只能输入3个
         action接口地址，验证输入 
        readonly只读模式 
        required设置必填项 
         size设置input框大小，默认大小为20 
        step设置number类型数字间隔为XX,默认为1
        value可以设置值为XX