H5基础知识总结

2017-02-11 20:24:00

257 355

border-radius:20px;/*设置四周的圆角*/border-radius:50px10px;/*上左下右,上右下左*/border-radius:50px30px10px;/*上左,上右下左,下右*/border-radius:50px40px30px20px;/*上左,上右,下右,下左*/border-radius:50px/100px;/*上下的圆角/左右的圆角*/border-top-left-radius:40px;/*上左*/border-top-right-radius:10px;/*上右*/border-bottom-left-radius:20px;/*下左*/border-bottom-right-radius:50px;/*下右*/2.6.2边框阴影box-shadow赋值方法：

box-shadow:5px5px20pxpink;/*x偏移值,y偏移值,影子四周模糊程度,影子颜色*/box-shadow:inset0px0px100pxyellow;/*添加了inset以后,影子会往内部伸展,其他的都是一样的*/box-shadow:5px5pxyellow,-5px-5pxblue,10px10pxgreen;/*多个影子需要使用逗号分隔*/注：设置边框阴影不会改变盒子的大小，不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。

border-image为复合属性：

border-image:url("img/border-image.png")17/17px/17pxround;2.7背景背景属性在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

background-size:10px;/*宽度10高度根据宽度计算*/background-size:10px10px;/*宽度10高度10*/background-size:auto;/*背景图片原始大小*/background-size:cover;/*背景图片原比例缩放到完全填满可能会超出*/background-size:contain;/*背景图片原比例缩放到高度或者宽度跟容器一样可能会有空白*/2.8渐变渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

线性渐变linear-gradient，指沿着某条直线朝一个方向产生渐变效果。

/*语法组合方式可以添加多个颜色*/background-image:linear-gradient(方向,开始颜色开始位置,颜色2开始位置,颜色3开始位置.....);/*具体代码*//*朝着右上角从红色到黄色*/background-image:linear-gradient(totopleft,red,yellow);/*朝着顺时针45度从红色到黄色*/background-image:linear-gradient(45deg,red,yellow);/*朝着顺时针45度红色,黄色,绿色*/background-image:linear-gradient(45deg,red,yellow,green);/*朝着顺时针45度红色到10px结束黄色从20px开始*/background-image:linear-gradient(45deg,red10px,yellow20px);/*朝着顺时针45度红色到10%结束黄色从20%开始*/background-image:linear-gradient(45deg,red10%,yellow20%);/*注意：如果上一个颜色的结束与下一个颜色的开始相等,那么不会出现过渡*/background-image:linear-gradient(45deg,red10%,yellow10%);2.8.2径向渐变径向渐变radial-gradient，指从一个中心点开始沿着四周产生渐变效果。

/*圆形渐变写法*/background:radial-gradient(半径,颜色1,颜色2等等);/*椭圆渐变写法*/background:radial-gradient(横向半径,竖向半径,颜色1,颜色2等等);/*设置位置*/background:radial-gradient(横向半径,竖向半径at位置,颜色1,颜色2等等);/*具体代码*//*半径100px红色绿色*/background:radial-gradient(100px,red,green);/*横向半径100px竖向半径200px红色绿色*/background:radial-gradient(100px200px,red,green);/*横向半径100px红色10px绿色20px*/background:radial-gradient(100px200px,red10px,green20px);/*横向半径100px红色10%绿色20%*/background:radial-gradient(100px200px,red10%,green10%);/*横向半径100px红色10%绿色20%在100px100px位置*/background:radial-gradient(100px200pxat100px100px,red10%,green10%);/*注意：如果上一个颜色的结束,跟下一个颜色的开始相等,那么不会出现过渡*/background-image:radial-gradient(100px,red10%,yellow10%);2.9过渡过渡transition是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

/*其中需要传入四个值,并且每个值都是0-1的小数*/transition:top1scubic-bezier(0.1,0.2,0.3,0.4);/*1s动画每隔1/6s完成一次在每次间隔的末尾开始动画*/transition:top1ssteps(6,end);/*1s动画每隔1/6s完成一次在每次间隔的开始开始动画*/transition:top1ssteps(6,start);2.102D转换转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

tranform:translate(10px,10px)rotate(180deg)scale(1.5,1.5);/*多个值通过空格分隔*/2.10.6transform-origint可以调整元素转换的原点。

/*x:50pxy:中心作为原点*/transform-origin:50px;/*x:50pxy:50px作为原点*/transform-origin:50px50px;/*x:10%y:20%作为原点*/transform-origin:10%20%;/*传入单词可选:top,left,right,center,bottom*//*左上作为原点*/transform-origin:righttop;/*中心作为原点*/transform-origin:centercenter;2.113D转换3D转换对应的属性依旧是transform，只是多了一个Z轴而已，Z轴的方向是垂直于屏幕，其中正方向指向我们的面部。

/*x方向旋转180°*/transform:rotateX(180deg)/*y方向旋转180°*/transform:rotateY(180deg)/*z方向旋转180°*/transform:rotateZ(180deg)2.11.2透视perspectiveperspective（透视，视角）这个属性能让图像具有立体感，呈现近大远小的效果。

/*直接添加给transform:标签距离显示屏1000px*/transform:perspective(1000px)/*直接使用perspective属性赋值:标签距离显示屏1000px*/perspective:1000px2.11.3视角方向perspective-origin默认我们是直直的看着屏幕，通过该属性可以修改查看屏幕的角度。

设置内嵌的元素在3D空间如何呈现，这些子元素必须为转换原素。3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style:preserve-3d来使其变成一个真正的3D图形，即让浏览器开启3D渲染。

设置元素背面是否可见。

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

/*会使用设置的宽度*/width:100px;/*使用比例宽度假设父容器中有3个子元素,flex都为1那么每个宽度为100%/3有3个子元素,flex分别为1,2,3那么宽度依次为(100%/(1+2+3))*1(100%/(1+2+3))*2(100%/(1+2+3))*3*/flex:1;display:flex;flex-direction:column;/*设置纵轴为主轴*/justify-content:space-between;/*水平方向对齐方式这个值为间距相等两边顶边*/flex-wrap:wrap;/*设置换行*/align-content:center;/*设置多行对齐方式*/