css3相关笔记（二）

1.在工作中如果出现了前所未有的bug，那很可能是你哪里的语法写错了，比如哪个变量名写错写串了，多写了少写了括号，多写了或少写了标点符号等等这些小bug，所以要培养找bug的能力，不要畏惧，因为bug是花，没有花哪里来的果实呢。


2.css3圆角边框样式 border-radius
◆border-radius表示盒子四个角(左上角、右上角、右下角、左下角)的弧度，border-radius:60px 60px 60px 60px;，如果圆角弧度四个值都相同，那个可以简写，border-radius:60px;（其实赋值的方式和margin与padding类似，都是时针赋值，赋一个值表示全方向，赋两个值表示左上角和右下角、右上角和左下角，赋三个值表示左上角、右上角和左下角、右下角）
◆border-radius如果同时设置每个角的水平半径和垂直半径的话，border-radius:60px 60px 60px 60px / 120px 120px 120px 120px;，如果每个角的水平半径和垂直半径都相同的话，可以简写，border-radius:60px/120px;，如果四个角的水平半径与垂直半径也全相同，那么可以再简写，border-radius:60px;
◆border-top-left-radius 表示左上角的弧度，可以设置两个值，分别是水平半径和垂直半径，border-top-left-radius：60px 120px;
◆border-top-right-radius 表示右上角的弧度，可以设置两个值，分别是水平半径和垂直半径，border-top-right-radius：60px 120px;
◆border-bottom-right-radius 表示右下角的弧度，可以设置两个值，分别是水平半径和垂直半径，border-bottom-right-radius：60px 120px;
◆border-bottom-left-radius 表示左下角的弧度，可以设置两个值，分别是水平半径和垂直半径，border-bottom-left-radius：60px 120px;
★给边框的每个角设置值不是固定的，而是百分比的话，那么就是动态计算值，那样比较好一点，就算盒子的大小发生变化，弧度依旧会随着盒子的变化而动态改变，依旧保持原来的弧度，设置固定的值就会出现盒子大小变化时，弧度不是原来的弧度了。


3.昨天的经验会成为明天进步的障碍，所以需要不断的学习。


4.css3 盒子阴影样式 box-shadow
◆box-shadow:3px 3px 3px 3px #f00  inset;，第一个值表示阴影x轴的水平位移，第二个值阴影表示y轴的垂直位移，第三个值表示阴影的模糊半径，第四个值表示阴影向外延伸的大小，第五个值表示阴影的颜色，第六个值表示阴影的类型，如果值为空则表示阴影类型为外阴影，inset表示阴影类型为内阴影，盒子阴影效果可以设置多个，设置多个阴影时，注意，前面的阴影层级相对于后面的阴影的层级而言，前面的层级要比后面的阴影层级要高，可以配合阴影效果的属性（阴影外延伸大小）来让后面的阴影也能够显示出来。


5.css3 边框图片样式  在有些浏览器上显示不出来（在实际工作中用的不多，因为这个很复杂，越复杂的东西兼容性越差）
◆ border-image-source:url(images/border.png);//图片边框的路径
◆ border-image-slice:27 27 27 27;//图片边框的裁剪 
◆ border-image-width:27px;//图片边框的宽度
◆border-image-outset:20px;//边框向外延伸的大小
◆ border-image-repeat:repeat/round/stretch ;//边框图片的平铺，repeat：正常平铺但是可能会显示不完整，round：平铺但是保证图片完整，stretch：拉伸显示不平铺


6.css3背景尺寸（控制背景图片的实际大小）
◆background-size:100px 100px;设置背景图片的宽度高度。
◆background-size:100% 100%;设置背景图片的宽度高度。
◆background-size:cover;设置背景图片等比例覆盖整个盒子，可能会超出去，但是超出去的部分看不见，在使用轮播图自适应图片的时候可能会用到这个属性，因为无论图片多大，都会等比例覆盖整个盒子 ，cover：遮盖整个盒子。
◆background-size:contain;设置背景图片被这个盒子等比例包含，背景图片不会超出去，但是可能不会填充满盒子，contain：被整个个盒子容纳。
★使用这个属性可以动态的控制背景图片的大小，实现背景真正的自适应宽高，如使用background-size:cover实现全屏背景自适应。


7.css3背景原点（背景图片从哪个位置开始显示）
◆background-origin:padding-box;（默认是从盒子的内padding的(0,0)点开始显示的）
◆background-origin:border-box;背景图片从盒子的border的(0,0)点开始显示。
◆background-origin:content-box;背景图片从盒子的内容区域(0,0)点开始显示。


8.css3背景裁剪 （背景图片从哪个位置开始裁剪）
◆background-clip:border-box;背景图片从border的(0,0)点开始裁剪，超过的部分就不要了也不会显示。
◆background-clip:padding-box;背景图片从padding的(0,0)点开始裁剪，超过部分就不要了也不会显示。
◆background-clip:content-box;背景图片从内容区域的(0,0)点开始裁剪，超过部分就不要了也不会显示。


9.css3多背景 （给一个盒子设置多个背景图片）
◆background:url(images/bg1.png) no-repeat left top,url(images/bg2.png) no-repeat right top,url(images/bg3.png) no-repeat right bottom,url(images/bg4.png) no-repeat left bottom,url(images/bg5.png) no-repeat center center;，这样就给一个盒子设置了四个方向以及中间的背景图片。◆background: url(images/top.png) no-repeat left top,url(images/bottom.png) no-repeat left bottom blue;这样子就能够在设置多个背景的时候同时设置背景颜色，背景颜色值放在最后一个背景图片的后面，其实这么做，还可以自适应移动端的手机不同的分辨率，如不容手机的高度不同，头部和尾部的图片设置了，中间部分由背景颜色替代，这样就可以很好的解决高度不同的问题倒是头部与尾部图片明显分裂。


10.css3 颜色渐变 （线性渐变 linear-gradient）
◆css3的颜色渐变实际上属于background-image的属性值，虽然实际上真的只是在设置颜色而已，但是还是算是在设置一个图片，可以设置图片平铺也能够设置图片定位。
◆background-image:linear-gradient(to right,yellow,green);，表示从左至右颜色从黄色变为绿色。
★linear-gradient(方向,起始颜色,终止颜色);，方向：to left、to right、to top、to bottom（默认方向是从上到下）、45deg（指定角度也行，45度表示从左下角往右上角渐变，135度表示从左上角往右下角渐变）区分角度，只需要看同位角。
◆linear-gradient(to right,yellow 0%,red 40%,blue 100%);这种方式也是可以的，这种方式属于指定方向指定点指定范围的过渡渐变，最开始是黄色(整个距离的长度为0%)，黄色过渡渐变到红色(整个距离的长度为40%的位置)，然后从40%的位置红色过渡渐变到蓝色(整个距离的长度100%的位置)结束。
◆linear-gradient(45deg,yellow 0%,yellow 25%,blue 25%,blue 50%,red 50%,red 75%,green 75%,green 100%);这种方式也可以，属于指定角度指定范围的过渡改变颜色，属于渐变的一种，但是是一段一段的改变颜色，如0%-25%的范围内是黄色的，然后25%-50%的范围内是蓝色的，之后50%-75%的范围内是红色的，最后75%-100%的范围内是绿色的，这种渐变的就是在指定范围内设置不同的颜色。


10.css3 颜色渐变 （径向渐变 radial-gradient）
★radial-gradient(x辐射半径 y轴辐射半径  中心的位置,起始颜色,终止颜色);，中心点位置：at left top（左上）、at left center（左中）、at left bottom（左下）、at rgiht top（右上）、at rgiht center（右中）、at rgiht  bottom（右下）、at centertop（中上）、at centercenter（正中间）、at centerbottom（中下） at 50px 50px（x轴位移50px,y轴位移50px）。
◆
◆
◆


11.颜色，#0000表示透明的颜色，#0000等价于#00000000，#00(red)00(green)00(blue)00(alpha)，IE浏览器的兼容性为0。


12.css3 过渡属性 transition (设置了这个属性之后，只要css样式发生了变化，都会有一个过渡的过程，这个过渡的过程是你定义好的)
◆transition:width 2s,background-color 2s;设置宽度与背景颜色改变的过渡及过渡时间，可以配合状态伪类使用，只要宽度或者背景颜色发生一丁点变化，都会进行过渡，过渡的过程会有一个动画效果。
◆如果多个过渡的特性都是一样的，那可以简写为 transition:all 2s;表示任何属性只要发生一丁点变化，都会进行过渡，过渡时间都为2秒钟，过渡的过程都会有一个动画的效果。
★transition:css样式属性名 持续时间  动画效果类型(如linear 线性匀速)  延迟时间;
☆transition-property:width; 表示设置过渡属性的css样式属性名
☆transition-duration:4s;表示设置过渡持续的时间
☆transition-timing-function:linear;表示动画效果的类型(运动曲线)，linear表示匀速(运动速度很平均)、ease表示减速(运动速度越来越慢)、ease-in表示加速(运动速度越来越快)、ease-out表示减速(运动速度越来越慢)、ease-in-out表示先加速再减速(运动速度由快到慢)
☆transition-delay:1s;表示过渡效果的延时，就是指定css样式属性改变之后，过几秒钟在执行这个过渡的过程。
☆transition:width 4s ease-in-out 0s;这是以上四个属性值的简写形式。


13.css3 2d变换效果 transform
◆transform:scale(2,0.5) translate(-100px,100px) rotate(45deg) skew(45deg,30deg);表示水平方向放大为原来的两倍、垂直方向缩小为原来的0.5倍、在x轴移动-100px、y轴移动100px、旋转45度、水平方向倾斜45度、垂直方向倾斜30度。
◆transform-origin:conter bottom;表示旋转的原点在中下方(默认是center center 正中间)，取值和radial-gradient的中心的位置是一模一样的。 
◆定位的盒子居中更好的办法【
 .box{
            width: 400px;
            height: 200px;
            background-color: red;
            position: absolute;


            top:200px;


            /*margin-left:-200px;*/


            /* 使用css3 来实现居中*/
            left:50%;
            /* 向左走自身宽度的一半*/
            transform:translate(-50%);
        }】
◆
◆
★